"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