js模板引擎-art-template常用
阿新 • • 發佈：2017-11-23
ava 隱藏 定義函數 debug 很多 原生 語法 console 接受
art-template
javascript 模板引擎
分為原生語法和簡潔語法，本文主要是講簡潔語法
- 基礎數據渲染
- 輸出HTML
- 流程控制
- 遍歷
- 調用自定義函數方法
- 子模板引入
基礎數據渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、編寫HTML模板
<script id="test" type="text/html"> <h1>{{title}}</h1> </script>
三、向模板插入數據，並輸出到頁面
vardata = { title:"hello world" }; var html = template("test",data); document.getElementById(‘content‘).innerHTML = html;
輸出HTML
<script id="test" type="text/html"> <h1>{{title}}</h1> </script>
//註意：{{title}}這是對內容編碼輸出，應該寫成{{#title}}這是對內容不編碼輸出
<script id="test" type="text/html"> <h1>{{#title}}</h1> </script> var data = { title:"<p>hello world</p>" }; var html = template("test",data); document.getElementById(‘content‘).innerHTML = html;
流程控制語句（if else）
{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template裏面的流程控制就相對其他模板來說強大很多了，直接看例子吧
<script id="test" type="text/html"> <div> {{if bok==22}} <h1>線上</h1> {{else if bok==33}} <h2>隱藏</h2> {{else}} <h3>走這裏</h3> {{/if}} </div> </script> <script> var data = { "bok":22 }; var html = template(‘test‘,data); document.getElementById("app").innerHTML = html; </script>
嵌套的寫法
<script id="test" type="text/html"> <div> {{if bok}} {{if list.length>=0}} {{each list}} <p>{{$index}}:{{$value}}</p> {{/each}} {{else}} <p>沒有數據</p> {{/if}} {{/if}} </div> </script> <script> var data = { "bok":true, list:["a","b","c"] }; var html = template(‘test‘,data); document.getElementById("app").innerHTML = html; </script>
循環遍歷語句
{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}
<script id="test" type="text/html"> <div> <ul> {{if c==100}} <ul> {{each person}} <li> 編號：{{$index+1}}--姓名：{{$value.name}}--年齡：{{$value.age}} </li> {{/each}} </ul> {{/if}} </ul> </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ] }; var html = template("test",data); document.getElementById("content").innerHTML = html; </script>
調用自定義方法
通過template.helper(name,fnCallBack)註冊方法
可以直接在{{}}中調用
<script id="test" type="text/html"> <div> {{if c==100}} <ul> {{each person}} <li>姓名：{{$value.name}}--性別：{{show($value.sex)}}</li> {{/each}} </ul> {{/if}} </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18,sex:1}, {name:"tom",age:19,sex:0}, {name:"jerry",age:20,sex:0}, {name:"kid",age:21,sex:1}, {name:"jade",age:22,sex:0} ] }; //自定義函數 template.helper("show",function(sex){ console.log(sex);//同樣可以打印日誌到控制臺 if(sex==0){ return "男" }else if(sex==1){ return "女" } }); var html = template("test",data); document.getElementById("app").innerHTML = html; </script>
調用子模板
{{include ‘main‘}} 引入子模板，數據默認為共享
{{include ‘main‘ a}} a為制定數據，但是同樣必須是父級數據，可以看看下面的例子，如果不註入的a的話，引入的子模板是接受不到數據的
<body> <div id="app"></div> <script src="template-debug.js"></script> <script id="main" type="text/html"> <ul> {{each list}} <li>{{$value}}</li> {{/each}} </ul> </script> <script id="test" type="text/html"> <div> <ul> {{each person}} <li>{{$value.name}}</li> {{/each}} </ul> {{include ‘main‘ a}} </div> </script> <script> var data = { person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ], a:{ list:[‘文藝‘, ‘博客‘, ‘攝影‘, ‘電影‘, ‘民謠‘, ‘旅行‘, ‘吉他‘] } }; var html = template("test",data); document.getElementById("app").innerHTML=html; </script> </body>
js模板引擎-art-template常用