[TOC] # 插件-t 模板渲染 提供模板工具.快速操作html和数据,不再拼接字符串啦 ## 特性 * 极其快速 * 自定义定界符 (custom delimiters) * 运行时求值 (runtime evaluation) * 运行时插值 (runtime interpolation) * 编译时求值 (compile-time evaluation) * 支持局部模板 * 支持条件语句 * 数组迭代器 * 编码 * 控制空白字符 - 全去或保留 * 流式友好 (streaming friendly) * 轻逻辑或者重逻辑，由你决定 ## 使用方法 ### 全自动版本 1.准备一下模板 ```html <div id="append-to-here"> 希望把内容放在这里 </div> <script type="text/html" id="test" target="#append-to-here" position="replace"> <strong>user:{{= t.user }}</strong> <p>tel:{{= t.tel }}</p> <p>time:{{= t.time }}</p> </script> ``` 2.根据节点生成模板 ```javascript // 读取生成模板 var tmpl = v.t('#test') // 把数据传递给模板,进行自动渲染吧 tmpl.render({user:'vace',tel:18800000000,time:new Date()}) ``` ### 纯手动版本 ```javascript // 模板字符串 var tmplStr = '<p><strong>user:{{= t.user }}</strong><strong>user:{{= t.tel }}</strong></p>' // 读取生成模板 var tmpl = v.t(tmplStr) var result = tmpl.render({user:'vace',tel:18800000000,time:new Date()}) document.querySelector('#append-to-here').innerHTML = result ``` ## API 以及说明 * `{{ }}` 用于求值(evaluation) * `{{= }}` 用于插值(interpolation) * `{{! }}` 用于编码求值 * `{{# }}` 用于编译时求值/引入和局部模板 * `{{## #}}` 用于编译时定义 * `{{? }}` 条件语句 * `{{~ }}` 数组迭代 ## 例子 ### 例子1 **模板** ```html {{ for(var prop in it) { }} <div>{{=prop}}</div> {{ } }} ``` **数据** ```json { "name":"Jake", "age":31, "mother":"Kate", "father":"John", "interests":[ "basketball", "hockey", "photography" ], "contact":{ "email":"jake@xyz.com", "phone":"999999999" } } ``` **结果** ```html <div>name</div> <div>age</div> <div>mother</div> <div>father</div> <div>interests</div> <div>contact</div> ``` ### 例子2 **模板** ```html {{? it.name }} <div>Oh, I love your name, {{=it.name}}!</div> {{?? it.age === 0}} <div>Guess nobody named you yet!</div> {{??}} You are {{=it.age}} and still don't have a name? {{?}} ``` **数据** ```javascript {"name":"Jake","age":31} ``` **结果** ```html <div>Oh, I love your name, Jake!</div> ``` ### 例子3 **模板** ```html {{~it.array :value:index}} <div>{{=value}}!</div> {{~}} ``` **数据** ```json {"array":["banana","apple","orange"]} ``` **结果** ```html <div>banana!</div><div>apple!</div><div>orange!</div> ```