art-template学习笔记

art-template

javascript 模板引擎，官网：https://github.com/aui/art-template

分为原生语法和简洁语法，本文主要是讲简洁语法

• 基础数据渲染
• 输出HTML
• 流程控制
• 遍历
• 调用自定义函数方法
• 子模板引入

基础数据渲染

一、引入art-template.js文件

二、编写HTML模板

三、向模板插入数据，并输出到页面

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

输出HTML

//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

var data = {
    title:"
hello world
"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

流程控制语句（if else）

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

嵌套的写法

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

调用自定义方法

通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用

调用子模板

{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的

如有笔误，请留言指出，共同进步！