• テンプレートにデータを適用する
• テンプレートにデータを繰り返し適用する
• 条件によりテンプレートの表示を操作する
• テンプレートにメッセージバンドルを適用できます。
• 同じテンプレートを繰り返し使う
• テンプレートにデータを適用できる HTML 属性
• 検討中の機能
• 関連リンク

jQuery.fn.render と jQuery.fn.compile は opensocial-jquery.templates.min.js を必要とします。

<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.templates.min.js"></script>

テンプレートにデータを適用する

jQuery.fn.render を使って、テンプレートにデータを適用できます。jQuery.fn.render にオブジェクトを指定し、テンプレートに ${expr} を埋め込み、そのプロパティを指定します。

<div class="person">
<img alt="${displayName}" src="${thumbnailUrl}">
<a title="${displayName}" href="${profileUrl || '#'}">${displayName}</a>
</div>
<script type="text/javascript">
$.getData('/people/@owner/@self', function(data) {
  $('div.person').render(data[0]/*person*/);
});
</script>

また、テンプレートの ${expr} は、演算子も使えます。

<div class="pager">from ${people.startIndex + 1}
  to ${people.startIndex + people.length } of ${people.totalResults}</div>
<script type="text/javascript">
$.getData('/people/@owner/@friends', function(data) {
  $('div.pager').render({ people: data });
});
</script>

テンプレートにデータを繰り返し適用する

jQuery.fn.render を使って、テンプレートにデータを繰り返し適用できます。jQuery.fn.render に配列を含むオブジェクトを指定し、テンプレートに repeat 属性を埋め込み、その配列名を指定します。このとき Cur 変数は、繰り返し中のデータを表します。

<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}">
<a title="${Cur.displayName}" href="${Cur.profileUrl || '#'}">${Cur.displayName}</a>
</div>
<script type="text/javascript">
$.getData('/people/@owner/@friends', function(data) {
  $('div.person').render({ people: data });
});
</script>

また、テンプレートに var 変数を指定し、Cur 変数に別名を付けることができます。

<div repeat="${people}" class="person" var="${person}">
<img alt="${person.displayName}" src="${person.thumbnailUrl}">
<a title="${person.displayName}" href="${person.profileUrl ||  '#'}">${person.displayName}</a>
</div>
<script type="text/javascript">
$.getData('/people/@owner/@friends', function(data) {
  $('div.person').render({ people: data });
});
</script>

また Context.Index 変数は、繰り返し中の配列位置を表します。0 が 1件目を表します。Context.Count 変数は、繰り返し中の配列サイズを表します。さらに Top 変数は jQuery.fn.render に指定したオブジェクトを表します。

<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}">
<a title="${Cur.displayName}" href="${Cur.profileUrl || '#'}">${Cur.displayName}</a>
( ${Context.Index} of ${Context.Count} by ${Top.url} )
</div>
<script type="text/javascript">
var url = '/people/@owner/@friends';
$.getData(url, function(data) {
  $('div.person').render({ url: url, people: data });
});
</script>

条件によりテンプレートの表示を操作する

jQuery.fn.render を使って、条件によりテンプレートの表示を操作できます。テンプレートに if 属性を埋め込み、テンプレートを表示する条件を指定します。

<div class="pager">
<div if="${people.length > 0}">from ${people.startIndex + 1}
  to ${people.startIndex + people.length } of ${people.totalResults}</div>
<div if="${people.length == 0}">There's no friend yet.</div>
</div>
<script type="text/javascript">
$.getData('/people/@owner/@friends', function(data) {
  $('div.pager').render({ people: data });
});
</script>

テンプレートにメッセージバンドルを適用できます。

jQuery.fn.render を使って、テンプレートにメッセージバンドルを適用できます。テンプレートに Msg 変数を埋め込み、メッセージバンドルを指定します。

<div class="pager">${Msg.nofriend}</div>
<script type="text/javascript">
$.getData('/people/@owner/@friends', function(data) {
  $('div.pager').render({ people: data });
});
</script>

同じテンプレートを繰り返し使う

jQuery.fn.compile を使って、事前にテンプレートをコンパイルします。その後、jQuery.fn.clone を使って、コンパイル済みのテンプレートを複製し、jQuery.fn.render を使って、テンプレートにデータを適用します。

<div id="people"></div>
<div class="person" style="display:none;">
<img alt="${displayName}" src="${thumbnailUrl}">
<a title="${displayName}" href="${profileUrl || '#'}">${displayName}</a>
</div>
<script type="text/javascript">
var compiled = $('div.person').compile();
$.getData('/people/@owner/@friends', function(data) {
  $.each(data, function(i, person) {
    compiled.clone().render(person).appendTo('#people').show();
  });  
});
</script>

テンプレートにデータを適用できる HTML 属性

次のとおり ${expr} を埋め込める HTML 属性に制限があります。将来のバージョンで対象を拡大します。

検討中の機能

• Context.UniqueId 変数は未実装です。将来のバージョンで実装します。
• index 属性は未実装です。将来のバージョンで実装します。
• context 属性は未実装です。将来のバージョンで実装します。
• os タグとカスタムタグは未実装です。将来のバージョンで実装するか検討中です。

関連リンク

• OpenSocial Templates Developer's Guide