一.資料架構
使用json物件或一般物件
var arrayObj=[
{},{},{},{}
]
var dataObj={
"prop1":"xx","prop2":"xx2",..
}
二.Template 內如何套用資料
當資料為Array就會反覆的將Array內物件反覆的套用tmpl
若當資料為一個物件，則會當成只有一個物件的Array，
只會套用tmpl一次
$("#樣板id").tmpl(要帶入的資料)
例
var data=[{"myname":"test1"},{"myname":"test2"}];
$("#my_tmpl_1").tmpl(data);
三. Template內資料讀取
資料來源分為兩個部份，一個是載入的資料，一種是自訂的變數
當透過tmpl帶入資料時同時可自訂變數
1.帶入資料並自訂變數與method
$("#my_tmpl_1").tmpl(data,{
getResult: function () {
return "xxx";
},
title: "my title"
});
2.取得由帶入資料取得的內容
1.${變數名稱}
2.透過tmplItem取得
${$item.data.變數名稱}
($item.data代表著整個tmplItem內的資料)
3.取得由自訂變數來取得的內容
都需要透過$item來取得
${$item.變數名稱}
呼叫執行自訂的method
${$item.methodName(param)}
4.在tmpl內在任何地方要參考到傳進來的資料都可用
${$data.變數名稱}來取得
若是在{{if}}內或是{{each}}內要用到要用到
則用$data.變數名稱即可
例 {{if $data.author=="ozzyqq"}}
5.對帶入的資料變數加入固定字串
例
<li><a href="#" id=${"submenu_"+id}>${title}</a></li>
不可用 id="submenu_"+${id}
6.將自訂屬性資料加入tmpl內
<div class="greenbar">${title+"-"+$item.nowIndex}</div>
四.取得由樣板產生的tmplItem應用
當頁面上的DOM物件是由tmpl所產生的，則可透過這些dom物件
取得tmplItem，做更多的應用
1.取得tmplItme
透過$(dom物件).tmplItem()取得tmplItem
注意，該DOm物件一定必需要是透過tmpl所產生的才有效
2.取得tmplItem的dom物件
tmplItem.nodes
3.取得tmplItme的資料
tmplItem.data
4.加入或修改變數
也可對套用的資料做修改或額外新增變數進去
例 $.tmplItem(this).data.newVar=xxx;
4.更新
只要改變tmplItem.data值再執行
tmplItem.update();
畫面就自動更新成新的值顯示的頁面
在樣板外，是透過$(dom物件).tmplItem()
來取得tmplItem的參考
而在樣板內則是以$item參考到tmplItem
五.{{if}} {{else}} 內的變數
{{if 變數名稱}}
{{if this.變數名稱}}
Example:比對外部值
{{each items}}
<option value=${id} {{if id==$('#folder02Select').val()}} selected='selected'{{/if}}>
${title}
</option>
{{/each}}
六.在tmpl內使用{{html 變數名稱}}
通常在tmpl內使用${變數名稱}所取得的值會經過編碼
若要取得的值不經過編碼則要用{{html 變數名稱}}
七 {{each 變數名稱}} {{/each}}
在樣板內，將array型的變數資料丟給each處理，可以
將array內每筆資料都再撈出來處理
在each內，
$index代表該筆資料的index....用${$index}顯示
$value代表該筆資料的內容...用$($value.變數名稱)來取得該筆資料內的變數值
例:
{{each 變數名稱}}
<li>${$index}+"__"+${$value.資料內的變數名稱}}</li>
{{/each}}
八 多層次的each使用
若不同層有相同的prop name可用this來區分
{{each items}}
<div class="btn_bg">
<div class="first">${title}
{{if this.items}}
<ul class="link">
{{each items}}
<li><a href="#">${title}</a></li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
{{/each}}
九.樣板中套用樣板
{{tmpl(資料變數名稱) "#樣板id名稱"}}
十.對物件套用不同樣板流程
1.將jQuery物件轉成準備套tmpl的tmplItem
selectedItem = $.tmplItem(jQuery物件);
2.指定tmplItem要使用的tmpl
selectedItem.tmpl = detailTemplate;
3.更新
selectedItem.update();
注意
無論是套用不同樣板，或是更新樣板tmplItem的data後
使用update()更新畫面
如果所產生的DOM物件有些屬性，是經由外部的js所設定
在update後這些屬性都會消失
