jQuery Template

一.資料架構

使用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後這些屬性都會消失