JavaScript模板引擎artTemplate.js——引入子模板

之前的例子都是单一结构的对象，如果遇到复杂对象结构，我们可以通过引入子模板来实现html的渲染。

依旧以之前的数据作为例子：

<div id="content"></div>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="test_tmpl">
    {{title}}
    {{include "list_tmpl"}}
</script>
<script type="text/html" id="list_tmpl">
    <ul>
        {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
    </ul>
</script>
<script type="text/javascript">
    var data = {
        title: "标签",
        list: ["文艺", "博客", "摄影", "电影", "民谣", "旅行", "吉他"]
    };
    var html = template("test_tmpl", data);
    document.getElementById("content").innerHTML = html;
</script>

从上面的示例可以看出，引入子模板的写法为{{include "子模板的id"}}，这样我们就可以实现多层级的对象的遍历渲染了。