# artTemplate.js 模板引擎 简洁语法例子

语法

  • 首先同样是引入template.js
<script src="template.js"></script>
  • 在结构中随便创建个div
<div id="div1"></div>
  • 创建模板(简洁的语法)
<script id="content" type="text/html">
    {{if isAdmin}}
        <h1>{{title}}</h1>
        <ul>
            {{each list as value index}}
               <li>索引：{{index}}:{{value}}</li>
            {{/each}}
        </ul>
    {{/if}}
</script>
  • 创建模板（原生语法）
<%if (isAdmin) {%>
    <h1><%=title%></h1>
    <ul>
        <%for (var i = 0; i < list.length; i++) {%>
            <li>索引：<%i%>:<%list[i]%></li>
        <%}%>
    </ul>
<%}%>
* 数据 （数据一般是从后台获取）

<script>
var data = {
title: "hello world",
isAdmin: true,
list: ['新闻','军事','历史','政治']
}；
var html = template('content',data);
document.getElementById('div1').innerHTML = html;
</script>

> 注意：简洁语法引用的js为（template.js）,原生语法引用的js为（template-native.js）

参考网址：https://github.com/aui/artTemplate
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容