本文是一篇JsRender的實用入門教程，實例講述了tag else使用、循環嵌套存取父級資料等知識點。分享給大家供大家參考。具體如下：
前言
JsRender是一款基於jQuery的JavaScript模版引擎，它具有以下特點：
· 簡單直覺
· 功能強大
· 可擴充的
· 快如閃電
這些特性看起來很厲害，但幾乎每個模版引擎，都會這麼宣傳。 。 。
由於工作需要，小菜才接觸到此款模版引擎。使用了一段時間，發現它確實比較強大，但小菜覺得有些地方強大的過頭了，反倒讓人覺得很難理解。
另一方面，JsRender的官方文件比較詳細，但其他資料出奇的少，遇到點什麼問題，基本搜不到，不僅僅是相關問題搜不到，幾乎就是沒有結果。
再加上JsRender有些地方確實是不好理解，所以急需小菜分享一些「最佳實踐」。
基於最近一段時間的使用，小菜總結了一些實用經驗，當然，這些經驗在官方文件上是找不到的。
巢狀循環使用#parent存取父級資料（不建議）
洗衣循環使用#parent存取父級資料 --- by 楊元
樣式>
頭>
序號第>
姓名 |
家庭成員 |
頭>
表>
巢狀循環使用參數存取父級資料（建議）
嵌套循環使用參數存取父級資料 --- by 楊元
<script><br />
//資料來源<br />
var dataSrouce = [{<br />
name: "張三",<br />
family: [<br />
"爸爸",<br />
"媽媽",<br />
"哥哥"<br />
]<br />
},{<br />
name: "李四",<br />
family: [<br />
"爺爺",<br />
"奶奶",<br />
"叔叔"<br />
]<br />
}];<br />
<br />
//渲染資料<br />
var html = $("#testTmpl").render(dataSrouce);<br />
$("#list").append(html);<br />
<br />
</script>
自訂標籤(custom tag)中使用else（強烈不建議）
自定义标签中使用else --- by 杨元
<script><br />
//資料來源<br />
var dataSrouce = [{<br />
name: "蘋果",<br />
price: 108<br />
},{<br />
name: "鴨梨子",<br />
price: 370<br />
},{<br />
name: "桃子",<br />
price: 99<br />
},{<br />
name: "鳳梨",<br />
price: 371<br />
},{<br />
name: "橘子",<br />
price: 153<br />
}];<br />
<br />
//自訂標籤<br />
$.views.tags({<br />
"isShow": function(price){<br />
var temp=price ''.split('');<br />
<br />
if(this.tagCtx.props.status === 0){<br />
//判斷價格是否為水仙花數，若是，則顯示，否則不顯示<br />
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){<br />
return this.tagCtxs[0].render();<br />
}else{<br />
return this.tagCtxs[1].render();<br />
}<br />
}else{<br />
return "";<br />
}<br />
<br />
}<br />
});<br />
<p> //渲染資料<br />
var html = $("#testTmpl").render(dataSrouce);<br />
$("#list").append(html);<br />
<br />
</script>
