原文：https://www.cnblogs.com/shiyou00/p/6841801.html
art-template
javascript 模板引擎，官网：https://github.com/aui/art-template
分为原生语法和简洁语法，本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js">script>二、编写HTML模板
<script id="test" type="text/html"> <h1>{{title}}h1> script>三、向模板插入数据，并输出到页面
var data = {
title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;输出HTML
<script id="test" type="text/html"> <h1>{{title}}h1> script>//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出
<script id="test" type="text/html"> <h1>{{#title}}h1> script> var data = { title:"<p>hello worldp>" }; var html = template("test",data); document.getElementById('content').innerHTML = html;流程控制语句（if else）
{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧
<script id="test" type="text/html"> <div> {{if bok==22}} <h1>线上h1> {{else if bok==33}} <h2>隐藏h2> {{else}} <h3>走这里h3> {{/if}} div> script> <script> var data = { "bok":22 }; var html = template('test',data); document.getElementById("app").innerHTML = html; script>嵌套的写法
<script id="test" type="text/html"> <div> {{if bok}} {{if list.length>=0}} {{each list}} <p>{{$index}}:{{$value}}p> {{/each}} {{else}} <p>没有数据p> {{/if}} {{/if}} div> script> <script> var data = { "bok":true, list:["a","b","c"] }; var html = template('test',data); document.getElementById("app").innerHTML = html; script>循环遍历语句
{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}
<script id="test" type="text/html"> <div> <ul> {{if c==100}} <ul> {{each person}} <li> 编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}} li> {{/each}} ul> {{/if}} ul> div> script> <script> var data = { c:100, person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ] }; var html = template("test",data); document.getElementById("content").innerHTML = html; script>调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用
<script id="test" type="text/html"> <div> {{if c==100}} <ul> {{each person}} <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}li> {{/each}} ul> {{/if}} div> script> <script> var data = { c:100, person:[ {name:"jack",age:18,sex:1}, {name:"tom",age:19,sex:0}, {name:"jerry",age:20,sex:0}, {name:"kid",age:21,sex:1}, {name:"jade",age:22,sex:0} ] }; //自定义函数 template.helper("show",function(sex){ console.log(sex);//同样可以打印日志到控制台 if(sex==0){ return "男" }else if(sex==1){ return "女" } }); var html = template("test",data); document.getElementById("app").innerHTML = html; script>调用子模板
{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的
<body>
<div id="app">div> <script src="template-debug.js">script> <script id="main" type="text/html"> <ul> {{each list}} <li>{{$value}}li> {{/each}} ul> script> <script id="test" type="text/html"> <div> <ul> {{each person}} <li>{{$value.name}}li> {{/each}} ul> {{include 'main' a}} div> script> <script> var data = { person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ], a:{ list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] } }; var html = template("test",data); document.getElementById("app").innerHTML=html; script> body>如有笔误，请留言指出，共同进步！