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>