javascript模板引擎之

在JavaScript中,我们经常会遇到字符串拼接的问题,当我们想避免用字符串拼接的办法来动态生成html,于是就可以用模板引擎来实现,比如选择underscore.js。

如下演示代码,

很简单,只是自定义了个数组data,然后借用underscore的模板功能用data去填充id为tpl的模板,把结果作为#container的innerHTML:

html 部分:

 <div id="container"></div>
js 渲染部分:

<script>
    $(function(){
        var data=[{name:'carl'},{name:'carl'},{name:'carl'}];
        var tmp=_.template($("#tpl").html());
        $("#container").html(tmp(data));
    });
</script>
js 填充数据部分:

<script type="text/template" id="tpl">
    <%_.each(obj,function(e,i){%>
    <ul>
        <li><%=e.name%></li>
    </ul>
    <%})%>
</script>

原文地址:https://www.cnblogs.com/cmyoung/p/6559538.html