[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> ```