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

應用案例

一、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>
<% } %>

<script type="text/javascript">
var data ={
    total_count:"175",
    data: [{"user_name":"飛天盜","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大豐董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"質量及作工都很是好，很滿意！","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]
};
var html = template.render('listtemp',data);
document.getElementById('content').innerHTML = html;

二、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}

<script type="text/javascript">
var data ={
    total_count:"175",
    data: [{"user_name":"飛天盜","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大豐董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"質量及作工都很是好，很滿意！","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]
    };
var listhtml = document.getElementById('listtemp').innerHTML;
var html = juicer(listhtml,data);
document.getElementById('content').innerHTML = html;

三、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文檔