>[info] `H.$tppl`：模板引擎核心方法，就一個方法，非常簡單。 - #### **編寫模板** 使用一個`type="text/html"`的`script`標簽存放模板： ``` <script id="test" type="text/html"> [: if (title){ :] [: for (var i=0;i<list.length;i++) { :] <div>[:=i:]. [:=list[i]:]</div> [:}:] [:}:] </script> ``` - #### **渲染模板** ``` <script type="text/javascript"> H.ready(function() { // json數據 var data = { title : '標簽', list : ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] }; // 獲取模板內容，并加載數據 var html = H.$tppl(H.$api.byId('test').innerHTML, data); // 將渲染的結果設置給指定div H.$api.byId('body').innerHTML = html; }); </script> ``` - #### **方法** - `tppl(tpl, data)`：返回渲染好的模板內容。 - `tppl(tpl)`：返回渲染函數。 ``` var tpl = "..." , data = {...}; var render = tppl(tpl); //渲染函數 var html = render(data); //重復使用 ``` - #### **默認模板占位符** `[:`：代碼開始區域 `:]`：代碼結束區域 如果不喜歡默認模板占位符，可以自行定制 ``` //注意：必須在模板引擎渲染之前調用，也就是`H.$tppl(tpl,data);`之前。 `H.$tppl_flag=['<%','%>'];` ``` 設置了之后，上面的模板可以更改為： ``` <script id="test" type="text/html"> <% if (title){ %> <% for (var i=0;i<list.length;i++) { %> <div><%=i%>. <%=list[i]%></div> <%}%> <%}%> </script> ``` - #### **基本使用** `[:=變量 :]`：輸出變量 `[: javascript代碼 :]`：書寫基本`javascript`代碼，只能是一行`javascript`代碼。 - #### **變量默認值** 1、為未定義的或值為假的變量給出默認值： ``` [:=foo||"變量foo存在但值為假":] [:=this.foo||"變量foo不存在或為假!":] ``` 2、避免未定義的變量引起系統崩潰： 若模板中定義了一個變量輸出，但傳入數據中卻沒有這個變量，模板解析就會出錯，從而引起整個程序的崩潰。如果無法確保數據完整性，仍然有方法可以對對其成員進行探測。在需要檢測的變量前加關鍵字 this，如： ``` [: if (this.dataName !== undefined) { :] [:= dataName :] [: } :] ``` 3、也可為不存在的變量設置默認值： ``` [:=this.foo||"變量foo不存在或為假!":] ``` 好了，就這么簡單！