js模板引擎

js模板引擎包括如下：
template
官方参考：http://aui.github.io/artTemplate
BaiduTemplate
官方参考：http://baidufe.github.io/BaiduTemplate
juicer
官方参考：http://juicer.name
doT
官方参考：http://olado.github.io/doT
kissy
官方参考：http://docs.kissyui.com和https😕/github.com/kissyteam/kissy
mustache
官方参考：https://github.com/janl/mustache.js

应用案例

1、template

<script id="listtemp" type="text/html">
<% if(data.length > 0) { %>
    <div>总共<%= total_count %>个数</div>
    <div>
        <% for(var i = 0; i < data.length; i++) { %>
            <div>
                <%= i + 1 %>、
                <a href="http://www.baidu.com/s?wd=<%= data[i].user_id %>"><%= data[i].user_name %></a>
                <div><%= data[i].comment_content %></div>
                <% if(data[i].average_grade > 3) { %>
                    <div><%= data[i].average_grade %></div>
                <% } %>
            </div>
        <% } %>
    </div>
<% } else { %>
    <div>暂无数据</div>
<% } %>

2、juicer
<script id="listtemp" type="text/template">
{@if !!data.length}
    <div>总共${total_count}个数</div>
    <div>
        {@each data as obj,index}
            <div>
                <a href="http://www.baidu.com/s?wd=${obj.user_id}">${obj.user_name}</a>
                <div>${obj.comment_content}</div>
                {@if obj.average_grade > 3}
                    <div>${obj.average_grade}</div>
                {@/if}
            </div>
        {@/each}
    </div>
{@else}
    <div>暂无数据</div>
{@/if}

3、handlebar
<script id="entry-template" type="text/x-handlebars-template">
{{#each content}}
<tr>
    <td name="bgName">{{bgName}}</td>
    <td name="subDesc" id={{Id}}>{{subDesc}}</td>
     <td name="btns" id="{{bgNum}}">
         <a id="editbg1" class="editbtn">编辑</a>
         <a id="delbg1" class="delbtn">删除</a>
    </td>
    </tr>
{{/each}}

var source = $("#entry-template").html();//获取模板 var template = handlebars.compile(source);//编译模板 var html = template(data);//渲染数据 $('#tcontent').append(html);//将模板数据放于dom文档