artTemplate模板引擎的不同使用方式

arttemplate提供了两种不同的使用方式

一种是将模板写在页面内

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + }} ：{{value}}</li>
    {{/each}}
</ul>
</script>

然后渲染模板

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);  // test为模板id  data为传入模板的数据
document.getElementById('content').innerHTML = html; // 将生成的dom放入目标dom内

同时artTemplate也支持使用外部模板的方式,另外创建一个后缀为 .tpl的文件

<div class="chart">
    <h3 class="chart-header clearfix">
        <span class="fl">{{orgName}}</span>
        <div class="fr">
            <p>
                今日完成<span>{{jrwcs}}</span>
            </p>
            <p>
                累计完成<span>{{ljwcs}}</span>
            </p>
            <p>
                摸底完成率<span>{{wcl}}</span>
            </p>
        </div>
    </h3>
    <div class="chart-body clearfix">
        <div class="chart-title">
            <span>社区</span>
            <span>今日完成</span>
            <span>累计完成</span>
            <span>完成率</span>
        </div>
        {{each data as item i}}
        <div class="chart-col">
            <span>
                {{item.orgName}}<br>社区<br>
                {{each item.wgys}}
                <i class="fa fa-user"></i>
                {{/each}}
            </span>
            <div class="chart-col-cell {{if item.wcl===100}}chart-col-completeness{{/if}}">
                <span>{{item.jrwcs}}</span>
                <span>{{item.ljwcs}}</span>
                <span>{{item.wcl}}</span>
                <span style="height:{{item.wcl}}%;" class="chart-item-progress {{if item.wcl<60}}chart-item-warning{{/if}}"></span>
            </div>
        </div>
        {{/each}}
    </div>
</div>

渲染模板(模板通过get方式获取)

var render = template.compile(tpl); // 传入模板
var html = render(data); // 传入数据给render
document.getElementById("test").innerHTML = html; // 将生成的 str 嵌入 目标 dom