Template7

当需要通过javascript 动态导入大量html模版时，可以使用Template7。Template7 是Framework7下的自动编译模版引擎，也可以脱离Framework7单独使用，很方便。具体使用方法

如下：

下载地址：

Template7 GitHub repo

html：

<script src="/js/template7.js"></script>


----------
<script type="text/template7" id="myTemplate">
    <p>{{title}}</p>
    <ul>
        {{#each people}}
        <li>{{../preKey}}:{{firstName}} {{lastName}}</li>
        {{/each}}
    </ul>
</script>  

语法：

变量表达式：
{{title}}:输出当前上下文对象下的title字段

{{../title}}:输出当前上下文对象的父级对象下的title字段

{{../../title}}:输出当前上下文对象向上推两级的对象下的title字段

{{this}}：当前上下文对象

{{person.name}}：输出在当前上下文中的“人”变量的“名称”属性

{{../person.name}}：输出在当前上下文的 父级对象 中的“人”变量的“名称”属性


----------
块级表达式：
{{#each}} ：循环开始

{{/each}}：结束循环

{{if}}：条件判断

{{else}}：不满足条件判断执行块

JS：

<script>
    $(function () {
        //测试用json数据
        var jsonData = {
            people: [
              {
                  firstName: ‘John‘,
                  lastName: ‘Doe‘
              },
              {
                  firstName: ‘Mark‘,
                  lastName: ‘Johnson‘
              },
            ],
            title: "this is a test title",
            preKey: "full name"
        };

        //获取模板
        var template = $(‘#template‘).html();

        // 编译模板
        var compiledTemplate = Template7.compile(template);

        // 使用模板加载数据
        var htmlStr = compiledTemplate(jsonData);

        //将得到的结果输出到指定区域
        $("#contents").html(htmlStr);
    });

</script>

更详细的使用方法链接：http://idangero.us/template7/