jugl:repeat の例です。
シーケンスとして使われる配列、またはその他のオブジェクトを与えられたとき、jugl：repeat は、シーケンス内の各項目に対する要素（およびすべての子要素）を複製します。
前述の Basics の処理コード1の続きに追加
---
<h2>Repeat</h2>
<!-- jugl:repeat を使うマークアップ2 -->
<div id="template_id2">
<ul>
<li jugl:repeat="item tasks" jugl:content="repeat.item.number + ': ' + item">
This will get replaced by something like '#: task'.
</li>
</ul>
<p>
Statements about my dog:
<span jugl:repeat="trait dog" jugl:content="'Her ' + trait + ' is ' + dog[trait] + '.'">
a statement here
</span>
</p>
<table>
<tr jugl:repeat="row data">
<td jugl:repeat="cell data[repeat.row.index]"
jugl:content="cell"
jugl:attributes="class repeat.row.odd ? 'oddrow' : 'evenrow'">
cell contents get written here
</td>
</tr>
</table>
</div>
<!-- 処理コード2 -->
<script type="text/javascript">
var tasks = ["work", "play", "sleep"];
var dog = {bark: "loud", color: "black"};
var data = [
["r0c0", "r0c1"],
["r1c0", "r1c1"]
];
(new jugl.Template("template_id2")).process();
</script>
</body>
</html>
Jugl テンプレートのマークアップ
<div id="template_id2">
<ul>
<li jugl:repeat="item tasks" jugl:content="repeat.item.number + ': ' + item">
This will get replaced by something like '#: task'.
</li>
</ul>
---
</div>
jugl:repeat="item tasks" は、task オブジェクト（配列）に対して処理をしています。
task を繰り返し処理して要素を順番に item に格納しその結果を jugl:content にわたします。
jugl:content では、number プロパティで 1 から順番に番号をつけて、item の内容と一緒に表示します。
（プロパティについては、lib.js: Jugl ホームページの online docs を参照してください。）
このテンプレートは次のコードで処理します。
<script type="text/javascript">
var tasks = ["work", "play", "sleep"];
---
(new jugl.Template("template_id2")).process();
</script>
テンプレートの処理をした後は、マークアップは次のようになります：
<div id="template_id2">
<ul>
<li>1: work</li>
<li>2: play</li>
<li>3: sleep</li>
</ul>
次のテンプレートのマークアップの jugl:repeat="trait dog" は、dog オブジェクト（「連想配列」、開発言語によっては「ハッシュ」）に対して処理をしています。
trait には、キー（bark, color）が格納され、dog[trait] には、trait に対応した値（loud, black）が格納されます。
<div id="template_id2">
---
Statements about my dog:
<span jugl:repeat="trait dog" jugl:content="'Her ' + trait + ' is ' + dog[trait] + '.'">
a statement here
</span>
---
</div>
このテンプレートは次のコードで処理します。
<script type="text/javascript">
---
var dog = {bark: "loud", color: "black"};
---
(new jugl.Template("template_id2")).process();
</script>
テンプレートの処理をした後は、マークアップは次のようになります：
<div id="template_id2">
---
<p>
Statements about my dog:
<span>
Her bark is loud.
</span>
<span>
Her color is black.
</span>
</p>
---
</div>
次のテンプレートのマークアップの jugl:repeat=""row data"" は、data オブジェクト（「多次元配列」、正確には「配列の配列」）に対して処理をしています。
row には、配列（var data = [A,B] の A, B）が格納されます。
実際にはありえませんが、<tr>A</tr><tr>B</tr> と仮定してください。
jugl:repeat="cell data[repeat.row.index] の cell には、data[repeat.row.index] すなわち A[i]（A[0], A[1]） に対応した値（r0c0, r0c1）が格納されます。
マークアップは、
<tr>
<td>r0c0</td>
<td>r0c1</td>
</tr>
<tr>
<td>r1c0</td>
<td>r1c1<td>
</tr>
となります。
jugl:attributes="class repeat.row.odd ? 'oddrow' : 'evenrow'" は、
<td> タグに class の属性を追加します。（<td class=""> となります。）
repeat.row.odd ? 'oddrow' : 'evenrow' は、repeat.row.odd が真（true）だったら oddrow、偽（false）evenrow が実行されます。
repeat.row.odd の odd プロパティは、1, 3, 5, ... と行が奇数かを判別します。
<div id="template_id2">
---
<table border = "1">
<tr jugl:repeat="row data">
<td jugl:repeat="cell data[repeat.row.index]"
jugl:content="cell"
jugl:attributes="class repeat.row.odd ? 'oddrow' : 'evenrow'">
cell contents get written here
</td>
</tr>
</table>
</div>
このテンプレートは次のコードで処理します。
<script type="text/javascript">
---
var data = [
["r0c0", "r0c1"],
["r1c0", "r1c1"]
];
(new jugl.Template("template_id2")).process();
</script>
テンプレートの処理をした後は、マークアップは次のようになります：
<div id="template_id2">
---
<table>
<tr>
<td class="evenrow">
r0c0
</td>
<td class="evenrow">
r0c1
</td>
</tr>
<tr>
<td class="oddrow">
r1c0
</td>
<td class="oddrow">
r1c1
</td>
</tr>
</table>
</div>
<head> に次の様に CSS を設定すると（最初の行の番号が0なので）２行目から１行おきに色がつきます。
<style type="text/css">
td.oddrow {
background-color: #ffcccc;
}
</style>
0 件のコメント:
コメントを投稿