JsRender實用入門教程
更新時間：2014年10月31日 10:08:18 投稿：shichen2014
這篇文章主要介紹了JsRender實用入門實例,包含了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點,并提供了完整的實例下載,非常具有實用價值,需要的朋友可以參考下
本文是一篇JsRender的實用入門教程，實例講述了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點。分享給大家供大家參考。具體如下：
前言
JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特點：
· 簡單直觀
· 功能強大
· 可擴展的
· 快如閃電
這些特性看起來很厲害，但幾乎每個模版引擎，都會這么宣傳。。。
由于工作需要，小菜才接觸到此款模版引擎。使用了一段時間，發(fā)現(xiàn)它確實比較強大，但小菜覺得有些地方強大的過頭了，反倒讓人覺得很難理解。
另一方面，JsRender的官方文檔比較詳細，但其他資料出奇的少，遇到點什么問題，基本搜不到，不僅僅是相關問題搜不到，幾乎就是沒有結果。
再加上JsRender有些地方確實是不好理解，所以急需小菜分享一些“最佳實踐”。
基于最近一段時間的使用，小菜總結了一些實用經(jīng)驗，當然，這些經(jīng)驗在官方文檔上是找不到的。
嵌套循環(huán)使用#parent訪問父級數(shù)據(jù)（不推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循環(huán)使用#parent訪問父級數(shù)據(jù) --- 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訪問父級數(shù)據(jù)，父級數(shù)據(jù)保存在data屬性中 --}}
{{!-- #data相當于this --}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//數(shù)據(jù)源
var dataSrouce = [{
name: "張三",
family: [
"爸爸",
"媽媽",
"哥哥"
]
},{
name: "李四",
family: [
"爺爺",
"奶奶",
"叔叔"
]
}];
//渲染數(shù)據(jù)
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循環(huán)使用#parent訪問父級數(shù)據(jù) --- 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訪問父級數(shù)據(jù)，父級數(shù)據(jù)保存在data屬性中 --}}
{{!-- #data相當于this --}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//數(shù)據(jù)源
var dataSrouce = [{
name: "張三",
family: [
"爸爸",
"媽媽",
"哥哥"
]
},{
name: "李四",
family: [
"爺爺",
"奶奶",
"叔叔"
]
}];
//渲染數(shù)據(jù)
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
嵌套循環(huán)使用參數(shù)訪問父級數(shù)據(jù)（推薦）
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循環(huán)使用參數(shù)訪問父級數(shù)據(jù) --- 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)時，可以在后邊添加參數(shù)，參數(shù)必須以~開頭，多個參數(shù)用空格分隔 --}}
{{!-- 通過參數(shù)，我們緩存了父級的數(shù)據(jù)，在子循環(huán)中通過訪問參數(shù)，就可以間接訪問父級數(shù)據(jù) --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data相當于this --}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//數(shù)據(jù)源
var dataSrouce = [{
name: "張三",
family: [
"爸爸",
"媽媽",
"哥哥"
]
},{
name: "李四",
family: [
"爺爺",
"奶奶",
"叔叔"
]
}];
//渲染數(shù)據(jù)
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是傳入的參數(shù)，status是附加屬性 --}}
{{isShow price status=0}}
{{:price}}
{{else price status=1}}
--
{{/isShow}}
</td>
</tr>
</script>
<script>
//數(shù)據(jù)源
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){
//判斷價格是否為水仙花數(shù)，如果是，則顯示，否則不顯示
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 "";
}
}
});
//渲染數(shù)據(jù)
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>
//數(shù)據(jù)源
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;
}
}
});
//渲染數(shù)據(jù)
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
完整實例代碼點擊此處本站下載。
希望本文所述對大家JsRender程序設計的學習有所幫助。
相關文章
微信小程序本地存儲實現(xiàn)每日簽到、連續(xù)簽到功能
這篇文章主要介紹了微信小程序本地存儲實現(xiàn)每日簽到、連續(xù)簽到功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
用Javascript做flash做的事..才完成的一個類.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一個類.Auntion Action var 0.1...2007-02-02
微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關于微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
JavaScript面試必備之垃圾回收機制和內(nèi)存泄漏詳解
垃圾回收機制和內(nèi)存泄漏是JavaScript面試時常常問到的問題，這篇文章就為大家詳細整理了他們的相關知識，感興趣的小伙伴可以跟隨小編一起了解一下2023-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)瀑布流布局效果展示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
BootStrap 模態(tài)框實現(xiàn)刷新網(wǎng)頁并關閉功能
這篇文章主要介紹了BootStrap 模態(tài)框實現(xiàn)刷新網(wǎng)頁并關閉的功能，實現(xiàn)方法簡單易懂,需要的朋友可以參考下2017-01-01
TypeScript 中的 .d.ts 文件詳解(加強類型支持提升開發(fā)效率)
.d.ts 文件在 TypeScript 開發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強大的類型系統(tǒng)帶來的優(yōu)勢,提高代碼質量和開發(fā)效率,接下來,我們將深入探討如何為 JavaScript 庫和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實踐和注意事項,一起看看吧2023-09-09
下面小編就為大家?guī)硪黄斎敕ǖ幕剀嚺c消息發(fā)送快捷鍵回車的沖突解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了詳解ES7 Decorator 入門解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了JavaScript封裝axios的實現(xiàn)，Axios是一個開放源代碼庫，使我們可以輕松地發(fā)出HTTP請求。 實際上，它是通過額外的超能力來fetch2022-09-09