art-template常用总结

高性能JavaScript模板引擎原理解析：http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/

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}}这是对内容不编码输出

流程控制语句（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的话，引入的子模板是接受不到数据的
<body>
<div ></div>
<script src="template-debug.js"></script>
<script >
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
<script >
    <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>


转载地址：http://www.cnblogs.com/shiyou00/p/6841801.html