基于jQuery的JavaScript模版引擎JsRender使用指南
更新時間：2014年12月29日 14:20:15 投稿：hebedich
這篇文章主要介紹了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以參考下
前言
JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特點：
· 簡單直觀
· 功能強大
· 可擴展的
· 快如閃電
這些特性看起來很厲害，但幾乎每個模版引擎，都會這么宣傳。。。
由于工作需要，小菜才接觸到此款模版引擎。使用了一段時間，發(fā)現它確實比較強大，但小菜覺得有些地方強大的過頭了，反倒讓人覺得很難理解。
另一方面，JsRender的官方文檔比較詳細，但其他資料出奇的少，遇到點什么問題，基本搜不到，不僅僅是相關問題搜不到，幾乎就是沒有結果。
再加上JsRender有些地方確實是不好理解，所以急需小菜分享一些“最佳實踐”。
基于最近一段時間的使用，小菜總結了一些實用經驗，當然，這些經驗在官方文檔上是找不到的。
注意：本文不是基礎入門教程，以下例子中自帶注釋，不做過多說明，讀者自行體會，不懂的地方可以留言。
嵌套循環(huán)使用#parent訪問父級數據（不推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循環(huán)使用#parent訪問父級數據 --- by 楊元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="10%">序號</th>
<th width="10%">姓名</th>
<th width="80%">家庭成員</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<!-- 定義JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{for family}}
{{!-- 利用#parent訪問父級index --}}
<b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>
{{!-- 利用#parent訪問父級數據，父級數據保存在data屬性中 --}}
{{!-- #data相當于this --}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//數據源
var dataSrouce = [{
name: "張三",
family: [
"爸爸",
"媽媽",
"哥哥"
]
},{
name: "李四",
family: [
"爺爺",
"奶奶",
"叔叔"
]
}];
//渲染數據
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
嵌套循環(huán)使用參數訪問父級數據（推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循環(huán)使用參數訪問父級數據 --- by 楊元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="10%">序號</th>
<th width="10%">姓名</th>
<th width="80%">家庭成員</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<!-- 定義JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{!-- 使用for循環(huán)時，可以在后邊添加參數，參數必須以~開頭，多個參數用空格分隔 --}}
{{!-- 通過參數，我們緩存了父級的數據，在子循環(huán)中通過訪問參數，就可以間接訪問父級數據 --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data相當于this --}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//數據源
var dataSrouce = [{
name: "張三",
family: [
"爸爸",
"媽媽",
"哥哥"
]
},{
name: "李四",
family: [
"爺爺",
"奶奶",
"叔叔"
]
}];
//渲染數據
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
自定義標簽(custom tag)中使用else（強烈不推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義標簽中使用else --- by 楊元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="50%">名稱</th>
<th width="50%">單價</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<!-- 定義JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- isShow為自定義標簽，price是傳入的參數，status是附加屬性 --}}
{{isShow price status=0}}
{{:price}}
{{else price status=1}}
--
{{/isShow}}
</td>
</tr>
</script>
<script>
//數據源
var dataSrouce = [{
name: "蘋果",
price: 108
},{
name: "鴨梨",
price: 370
},{
name: "桃子",
price: 99
},{
name: "菠蘿",
price: 371
},{
name: "橘子",
price: 153
}];
//自定義標簽
$.views.tags({
"isShow": function(price){
var temp=price+''.split('');
if(this.tagCtx.props.status === 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 this.tagCtxs[0].render();
}else{
return this.tagCtxs[1].render();
}
}else{
return "";
}
}
});
//渲染數據
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
用helper代替自定義標簽（推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用helper代替自定義標簽 --- by 楊元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="50%">名稱</th>
<th width="50%">單價</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<!-- 定義JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- 利用原生的if做分支跳轉，利用helper做邏輯處理 --}}
{{if ~isShow(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script>
<script>
//數據源
var dataSrouce = [{
name: "蘋果",
price: 108
},{
name: "鴨梨",
price: 370
},{
name: "桃子",
price: 99
},{
name: "菠蘿",
price: 371
},{
name: "橘子",
price: 153
}];
//Helper
$.views.helpers({
"isShow": 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;
}
}
});
//渲染數據
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
演示代碼打包下載：http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar
相關文章
這篇文章主要為大家詳細介紹了jQuery插件實現圖片輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jquery的ajax和getJson跨域獲取json數據的實現方法
本篇文章主要是對jquery的ajax和getJson跨域獲取json數據的實現方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JQuery 自定義CircleAnimation，Animate方法學習筆記
最近對看了一些JQuery的基礎教程，被JQuery深深的吸引住了，以前用過Extjs，看了JQuery不禁感嘆，javascript還能這么些，真是太神奇了！2011-07-07
jquery tree 可編輯節(jié)點實現代碼(jquery一句話節(jié)點菜單)
jquery tree 可編輯節(jié)點，實現的三級菜單實現代碼，這里我們將為大家準備了兩個。一個是鋒利的jquery中的一句話導航菜單實現代碼。非常不錯。2009-11-11
點擊姓名會顯示她的基本詳細信息，點擊切換皮膚，會更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實現的網頁版的個人簡歷2013-04-04
這篇文章主要介紹了jQuery對下拉框,單選框,多選框的操作需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章為大家分享了一個jQuery實現寬屏圖片輪播實例教程，外觀看上去非常大氣，感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)硪黄猀uery常用DIV操作獲取和設置長度寬度的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本篇文章，小編為大家介紹關于jQuery實用基礎超詳細介紹，有需要的朋友可以參考一下2013-04-04
這篇文章主要為大家詳細介紹了jquery datatable服務端分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08