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

arttemplate提供了兩種不同的使用方式

一種是將模板寫在頁面內

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{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