template.js插件--好用的模板插件

template.js是一款JavaScript模板引擎，简单好用，而且只有5K左右哦！
最近刚好做一个工程用到了，就来总结下。

原理：提前将Html代码放进一个<script id="test" type="text/html"></script>中，当需要用到时，在js里这样调用：var  htmlstr=template("test",放Json数据或其他);然后$("#***").html(htmlstr),放进去就好！

具体方法：

1，编写模板：

<script id="tpl" type="text/html"><ul>    <%for(var i = 0; i < list.length; i++) {%>    <li><%:=list[i].name%></li>    <%}%></ul></script>

2，渲染模板

var tpl = document.getElementById('tpl').innerHTML;template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

3，输出结果

<ul>    <li>yan</li>    <li>haijing</li></ul>

这就是简单的用法，接下来我详细介绍下编写模板时的语法：

假如返回的Json是这样的格式：

return Json(new{      statusCode = 200,      List = [a,b],      url = "****",      callBack = "callBack"});

模板中写的语法：

<script type="text/html" id="test">    {{if statusCode==200}}    <p>成功了！</p>    {{else}}    <p>哎~~~！</p>    {{/if}}    {{each List as item i}}    <p>{{item}}其中的i也是可用的哦！表示下标</p>    {{/each}}</script>

简单的if else，each遍历就是这样子用的，其实就是在语法最外围套上两个花括号，灵活运用的话，小模板出大奇迹哦！