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