art-template
分为原生语法和简洁语法，本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、编写HTML模板
<script id="test" type="text/html"> <h1>{{title}}</h1> </script>
三、向模板插入数据，并输出到页面
var data = { 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>
原生语法
使用原生语法，需要导入template-native.js文件。
在HTML中定义模板，注意模板的位置，不要放到被渲染区域，防止模板丢失。
<script id="main_panel_big_sale_template" type="text/html"> <% for (var i = 0; i < products.length; i ++) { %> <% var product =products[i]; %> <% if (i < 3) { %> <li> <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>"> <div class="flash-time-box"> <span>2015-02-09</span> </div> <strong class="marque"><%=product.name%></strong> <strong class="libelle"><%=product.description%></strong> <div class="no-picto"> <span class="prod-tip"> <img src="img/grey.png" data-original="img/icon.png"> </span> <span class="italic black"> <span class="cny-curr">¥ <%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span> </span> </div> </li> <% } %> <% } %> </script>
template(id, data)
渲染数据到页面
$('#main_panel').html(template('main_panel_big_sale_template', data));
简洁语法
使用简洁语法，导入template.js文件。
<script id="main_panel_big_sale_template" type="text/html"> {{each products as product i}} {{if i < 3}} <li> <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}"> <div class="flash-time-box"> <span>2015-02-09</span> </div> <strong class="marque">{{product.name}}</strong> <strong class="libelle">{{product.description}}</strong> <div class="no-picto"> <span class="prod-tip"> <img src="img/grey.png" data-original="img/icon.png"> </span> <span class="italic black"> <span class="cny-curr">¥ {{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span> </span> </div> </li> {{/if}} {{/each}} </script>
渲染数据到页面，和原生语法一样
$('#main_panel').html(template('main_panel_big_sale_template', data));
调用外部函数
template.helper
上面的例子中，都调用了formatPrice函数，要调用此函数需要通过helper方法注册：
template.helper('formatPrice', function(price, type) { if(price){ var arrayPrice = price.toString().split("."); if(type == 'integer') { return arrayPrice[0]?arrayPrice[0]:"0"; }else if (type =='decimal') { return arrayPrice[1]?arrayPrice[1].length == 1?"."+arrayPrice[1]+"0":"."+arrayPrice[1]:".00"; } }else{ if(type == 'integer') { return "0"; }else if (type =='decimal') { return ".00"; } } });
原生语法与简洁语法比较
| 语法类型 | 调用外部函数 |
| 原生 | <%=formatPrice(product.promoPrice,'integer')%> |
| 简洁 | {{product.price.value | formatPrice: 'integer'}} |
简洁语法的传参有点奇怪，原生语法就很好理解，如果要传递三个参数，简洁语法该怎么写呢？
简洁语法的循环如果要做更多逻辑，也实现不了。
推荐使用原生语法
template.compile
模板可以直接写在JS中，再编译渲染。
var source = '<ul>' + '<% for (var i = 0; i < list.length; i ++) { %>' + '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>' + '<% } %>' + '</ul>'; var render = template.compile(source); var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']}); document.getElementById('content').innerHTML = html;
这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。