>[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不存在或为假!":] ``` 好了，就这么简单！