2010年1月25日月曜日

"opensocial-jquery.templates"でマイミクを表示してみた

スズキです。

こちらを参考にしています。
http://code.google.com/p/opensocial-jquery/wiki/Template

XMLはこんな感じです。

--------【mixi.xml】--------
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World!">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html"><![CDATA[

    <h1>Hello, Friends!</h1>
    <div id="wrapper" style="display:none;">
      <div repeat="${people}" class="person">
        <img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}"/>
        ${Cur.nickname}
      </div>
    </div>

    <script type="text/javascript"
      src="http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js">
    </script>
    <script type="text/javascript"
      src="http://scripts.lrlab.to/opensocial-jquery.templates-0.1.0.min.js">
    </script>
    <script type="text/javascript">
      jQuery(function($) {
        var url = "/people/@owner/@friends";
        var data = { fields: 'profileUrl' };
        $.getData(url, data, function(data) {
          $("#wrapper").render({ people: data }).show();
        });
      });
    </script>

  ]]></Content>
</Module>
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/other/mixi.xml?r=140

ちゃんとドキュメントは読んでいませんが、ポイントである繰り返しのやり方は、たぶん、

$("#wrapper").render({ people: data }).show();

のrenderの引数で、名前(people)とデータ(data)を対応付けて、

<div repeat="${people}" class="person">

のrepeatで、その名前を対応付けて、

<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}"/>

のように、各々のデータはCurでアクセスする感じになるんじゃないかと思います。

次は、「mixiアプリにマイミクを招待」、だ。

--------
http://www.suz-lab.com

0 コメント: