javascript模板引擎之 - underscore.js的_.template()方法

在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>