Framework7中Template7的使用

Framework7官网：http://framework7.io/

Template7的使用

1. 使用

（1）html部分

<!--id需和js处对应-->
<script id="homeTemplate" type="text/template7">
    <div data-page="home" class="page">
        <div class="page-content">
            <div class="content-block">
                <p>Here are the list of people i know:</p>
                <ul>
                    {{#each people}}
                    //遍历以及数据标记
                    <li>{{firstName}} {{lastName}}</li>
                    {{/each}}    
                </ul>          
            </div>
        </div>
    </div>  
</script>

[1] 使用javascript标记区块，此处id需和js中的对应。
[2] 使用{{}}将需要替换的内容进行标记，此处名称需和数据的名称一致
[3] each等标记的使用

（2）js部分

//--初始化--
var myApp = new Framework7({
    //设置属性，使用模板
    precompileTemplates: true
});
//--数据--
var context = {
    people : [
        {
            firstName: 'John',
            lastName: 'Doe'
        },
        {
            firstName: 'Mark',
            lastName: 'Johnson'
        },
    ]
};

//--View--
var mainView = myApp.addView('.view-main');
//若不在view-main中，而是在其他View中，可写为：
//var view2 = myApp.addView('#view-2');

//--使用数据替换--
//若为view2，此处应写为view2.router.load();
mainView.router.load({
    //此处的homeTemplate需要和script中的id一致
    template: Template7.templates.homeTemplate,
    context: context
});

2. 问题及注意事项

（1）template不生效
在使用script标签时，内部必须包含<div data-page="home" class="page">，若此页面标签在外部，页面内容将无法显示
（2）填充标记在jade中的使用
上述中提到像each这样的标记，官网的例子中都是原生的html，使用jade工程师非常不便，但问题依旧可以解决，格式如下：

script#timelineTemplate(type="text/template7")
      .page(data-page="timeline")
         .page-content
            .timeline
               |{{#each timeline}}
               .timeline-item
                  .timeline-item-date {{this.name}}
                  .timeline-item-divider
                  .timeline-item-content
                     |{{#each this.detail}}
                     .timeline-item-inner
                        .timeline-item-time {{this.time}}
                        .timeline-item-title {{this.title}}
                        .timeline-item-text {{this.text}}
                     |{{/each}}
               |{{/each}}

推荐一个html转jade的网址：http://html2jade.vida.io/