之前的例子都是单一结构的对象，如果遇到复杂对象结构，我们可以通过引入子模板来实现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"}}，这样我们就可以实现多层级的对象的遍历渲染了。