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遍历就是这样子用的，其实就是在语法最外围套上两个花括号，灵活运用的话，小模板出大奇迹哦！