最近學習了一下Jsrender模板渲染工具，非常不錯，功能比較強大，官網說他是“簡單直觀 功能強大 可擴展的 快如閃電”確實如此。總結一下！！
jsRender 三個最重要的概念：模板、容器和數據。 最重要的是：view(視圖) 是我們定義的模板，上下文是視圖所用的對象。
一、基礎。
{{:}} 和 {{>}}(或{{html:}})兩者都可以輸出內容，不過后者是經過html編碼的。
{{: pathOrExpr}} (value) 值類型
{{> pathOrExpr}} (HTML-encoded value) html編碼后的值
{{* mycode}} (using code) 代碼
二、邏輯判斷和循環。
if-else
語法：{{if condition}} ... {else condition} ... {{else}}... {{/if}}
例子：
<script type="text/tmp" id="tmp4"> <p>my name is: {{:name}}</p> <p>我是： {{if info.age >= 18}} 成年人 {{else}} 未成年 {{/if}} </p> </script> var html = $("#tmp4").render(data); $("#list").html(html);
for
語法： {{for}} ... {{/for}}
例子：
<script type="text/tmp" id="tmp5"> {{for}} <li>id:{{:ID}} name:{{:Name}}</li> {{/for}} </script> var arr = [ { ID: 1, Name: "tom" }, { ID: 2, Name: "jack" }, { ID: 3, Name: "lucy"} ]; var html = $("#tmp5").render(arr); $("#list").html(html);
嵌套for
語法：語法：{{for}}...{{for 當前上下文}} ... {{/for}} ... {{/for}}
例子：
<script type="text/tmp" id="tmp7"> {{for}} <li> name:{{:name}} <ul> {{for hobbies}} <li>{{:#getIndex() + 1}}:{{:#data}}</li> {{/for}} </ul> </li> {{/for}} </script> arr = [ { name: "tom", hobbies: ["籃球", "足球"] }, { name: "jack", hobbies: ["籃球", "橄欖球"] }, { name: "lucy", hobbies: ["游泳", "羽毛球"] } ]; var html = $("#tmp7").render(arr); $("#list").html(html);
分離for
語法：{{for 上下文 tmpl="模板id" /}}
如果for的邏輯比較復雜，嵌套的for就會讓我們的模板變得復雜，維護難度加大；我們可以將for分離，以上面的例子，可以將for放到一個新的模板，然后通過 tmpl屬性指定。
例子：
<script type="text/tmp" id="tmp8"> {{for}} <li> name:{{:name}} <ul> {{for hobbies tmpl="#tmp9" /}} </ul> </li> {{/for}} </script> <script type="text/tmp" id="tmp9"> <li>{{:#getIndex() + 1}}:{{:#data}}</li> </script> var html = $("#tmp8").render(arr); $("#list").html(html);
嵌套循環使用參數訪問父級數據，直接看例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套循環使用參數訪問父級數據</title> </head> <body> <table border="1px"> <thead> <tr> <th >序號</th> <th >姓名</th> <th>年齡</th> <th >家庭成員</th> </tr> </thead> <tbody id="list"> </tbody> </table> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:#index + 1}}</td> <td>{{:name}}</td> <td>{{:age}}</td> <td> {{!-- 使用for循環時，可以在后邊添加參數，參數必須以~開頭，多個參數用空格分隔 --}} {{!-- 通過參數，我們緩存了父級的數據，在子循環中通過訪問參數，就可以間接訪問父級數據 --}} {{for family ~parentIndex=#index ~parentName=name ~parnetAge=age}} <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b> {{!-- #data相當於this --}} {{:~parentName}}的{{:#data}}{{:~parnetAge}} {{/for}} </td>
</tr> </script> <script> var dataSrouce = [ { name: "張三", age:3, family: ["爸爸", "媽媽", "哥哥"] }, { name: "李四", age:4, family: ["爺爺","奶奶","叔叔" ] } ]; $("#list").append($("#testTmpl").render(dataSrouce)); </script> </body> </html>
[ { name: "張三", age:3, family: ["爸爸", "媽媽", "哥哥"] }, { name: "李四", age:4, family: ["爺爺","奶奶","叔叔" ] } ]; $("#list").append($("#testTmpl").render(dataSrouce)); </script> </body> </html>
三、擴展應用
上面的基本用法已經可以滿足大部分需求了。以下幾個擴展都是為了分離視圖和邏輯的，試想一下，如果我們的視圖里還需要大量的邏輯判斷或計算，全都寫在一起，那會非常麻煩和難以維護。視圖最好就是簡單的標簽，而邏輯都寫在js里。jsRender是在視圖上進行擴展的。
組合模板： include 組合模板
語法：include tmpl="模板id"
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>include 組合模板</title> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> </head> <body> <p>{{include tmpl=... /}} 標簽用於組合模板(template composition) -----用於在一個模板中引入另一個模板，並用上下文的數據來渲染template。</p> <script id="peopleTemplate" type="text/x-jsrender"> <div> {{:name}} lives in {{include tmpl="#addressTemplate"/}} </div> </script> <script id="addressTemplate" type="text/x-jsrender"> <b>{{>address.city}}</b> </script> <div id="peopleList"></div> <script> var people = [ { "name": "Pete", "address": { "city": "Seattle" } }, { "name": "Heidi", "address": { "city": "Sidney" } } ]; var html = $("#peopleTemplate").render(people); $("#peopleList").html(html); </script> </body> </html>
自定義標簽：views.tags和 views.helpers
語法：
views.tags
1.視圖 {{"標簽名稱" 標簽參數 附加參數}}
2.邏輯 $.views.tags({"標簽名稱":function(參數){this.tagCtx.props.prefix附加參數}}) //prefix附加參數是你傳的參數名稱
views.helpers
1、視圖{{~“標簽名稱”(附加參數)}}
2、邏輯$.views.helpers（{“標簽名稱”：function（參數）{//具體邏輯}}）
因為兩者基本都一樣，但是views.helpers比較靈活
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兩種自定義標簽 views.tags和 views.helpers </title> </head> <body> <p>不推薦使用 $.views.tags 這種自定義標簽 建議使用$.views.helpers </p> <div> <p>views.tags</p> <table> <thead> <tr> <th width="50%">名稱</th> <th width="50%">單價</th> </tr> </thead> <tbody id="list"> <!-- 定義JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- isShow為自定義標簽，price是傳入的參數，status是附加屬性 --}} {{isShow price age=0}} {{:price}} {{else price age=1}} -- {{/isShow}} </td> </tr> </script> </tbody> </table> </div> <br/><br/> <br/><br/>
<div id="div2"> <p>views.helpers</p> <table> <thead> <tr> <th width="50%">名稱</th> <th width="50%">單價</th> </tr> </thead> <tbody id="list2"> <script id="testTmpl2" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- 利用原生的if做分支跳轉，利用helper做邏輯處理 --}} {{if ~isShow123(price)}} {{:price}} {{else}} -- {{/if}} </td> </tr> </script> </tbody> </table> </div> <body> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> <script> //數據源 var dataSrouce = [{ name: "蘋果", price: 108 },{ name: "鴨梨", price: 370 },{ name: "桃子", price: 99 },{ name: "菠蘿", price: 371 },{ name: "橘子", price: 153 }]; //自定義標簽 $.views.tags可以自定義標簽，指定自定義標簽的渲染規則。它可以給一段固定格式的html塊起個名稱，然后通過這個名稱直接調用
$.views.helpers({
"isShow123": function(price){ var temp=price+''.split(''); if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ return true; }else{ return false; } } }); //views.tags渲染數據 var html = $("#testTmpl").render(dataSrouce); $("#list").append(html); //vies.helpers渲染數據 var html2 = $("#testTmpl2").render(dataSrouce); $("#list2").append(html2); </script> </body> </html>
做分支跳轉，利用helper做邏輯處理 --}} {{if ~isShow123(price)}} {{:price}} {{else}} -- {{/if}} </td> </tr> </script> </tbody> </table> </div> <body> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> <script> //數據源 var dataSrouce = [{ name: "蘋果", price: 108 },{ name: "鴨梨", price: 370 },{ name: "桃子", price: 99 },{ name: "菠蘿", price: 371 },{ name: "橘子", price: 153 }]; //自定義標簽 $.views.tags可以自定義標簽，指定自定義標簽的渲染規則。它可以給一段固定格式的html塊起個名稱，然后通過這個名稱直接調用 $.views.tags({ "isShow": function(price){ var temp=price+''.split(''); //this.tagCtx.render(val)有點像指定參數的感覺。官方說是 if(this.tagCtx.props.age === 0){ //判斷價格是否為水仙花數，如果是，則顯示，否則不顯示 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ return "<p><em style='color: red'>"+this.tagCtxs[0].render()+"</em></p>"; }else{ return this.tagCtxs[1].render(); } }else{ return ""; } } }); $.views.helpers({ "isShow123": function(price){ var temp=price+''.split(''); if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ return true; }else{ return false; } } }); //views.tags渲染數據 var html = $("#testTmpl").render(dataSrouce); $("#list").append(html); //vies.helpers渲染數據 var html2 = $("#testTmpl2").render(dataSrouce); $("#list2").append(html2); </script> </body> </html>
轉換器 converter
轉換器可以對輸出結果進行處理，例如大小寫轉換等。
語法：
1. 視圖 {{"轉化器名稱":參數}}
2. js $.views.converters({"轉換器名稱":function(參數){...}})
<script type="text/tmp" id="tmp11"> {{for}} <li> Upper Name: {{toUpper:#parent.data.name}} </li> {{/for}} </script> $.views.converters({ "toUpper":function(name){ if(name){ return name.toUpperCase(); } } }) var html = $("#tmp11").render(arr); $("#list").html(html)
嗯，再次介紹一個比較好的例子網站：http://borismoore.github.io/jsrender/demos/demos.html，最好是參考官網：www.jsviews.com