前台模板underscore使用方法

前端Ajax调取后台数据后，有时候需要使用模板引擎渲染部分页面，常用有underscore.js arttempalte.js等，使用underscore如下：

1.先循环,再渲染

1.1 先循环
得到模板，模板函数

var compiled = _.template($("#moban").html());
    //result为Ajax获取的数据
    for (var i = 0; i < result.result.length; i++) {
        //数据绑定
        var html = compiled({
            name: result.result[i].name,
            age: result.result[i].age,
            sex: result.result[i].sex,
            id: result.result[i].id
        });
        //DOM操作，添加节点
        $("#personinfo").append($(html));
    }
 });

1.2 再渲染

<script type="text/template" id="moban">
    <div class="liuyankuai">
        <p>【姓名】<%= name %></p>
        <p>【年龄】<%= age %></p>
        <p>【性别】<%= sex %></p>
    </div>
</script>

2. 先渲染，后循环

2.1 先渲染

var compiled = _.template($("#moban").html());
var html = compiled({model:json});
$("#personinfo").html(html);

2.2 后循环

<script type="text/template" id="moban">
    <%_.each(model,function(item,i){ %>
        <div class="list-group" class="<%=i==0?'active':''%>">
                <p><%= item.name %></p>
                <p><%= item.age %></p>
        </div>
    <%});%>    
</script>
<script type="text/template" id="template_image">
    <%_.each(model,function(item,i){%>
    <div class="item <%=i==0?'active':''%>">
        <%if(isMobile){%>
            <a class="m_imageBox" href="#">
                <img src="<%=item.mb%>" alt=""/>
            </a>
        <%}else{%>
            <a class="pc_imageBox" style="background-image: url(<%=item.pc%>)"
               href="#"></a>
        <%}%>
    </div>
    <%});%>
</script>