text html template遍历,腾讯js模板引擎的art-template常用总结记录

关于腾讯的前端模板art-template，断断续续地用过(维护老项目使用的比较多)，有时用过了，当时还记得住，过一段时间，有的细节容易忘记，还需不断去百度找文档，所以在此，自己根据使用过的情况，简单总结记录一下，纯属方便自己查找。说明：本人主要使用的是art-template.js 简洁版的语法(使用中发现，新版本和老版本有的地方写法略有不同)。

一、art-template介绍

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript  极限的运行性能，并且同时支持 NodeJS 和浏览器。

二、下载最新版的art-template

1、下载好以后，引入art-template.js文件

2、编写HTML模板，使用一个type=”text/html”的script标签存放模板，{{}}是art-template获取数据的语法，如：

{{ data.name}}

3、在js中读到数据后，向模板插入数据，并输出到页面，如

var data = {

name:"我是art-template"

};

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;

那么页面就可以显示出“name”的内容了。

四、art-template循环遍历的使用

1、语法：

{{each data}}

索引值：{{$index}}

值：{{$value.name}}

{{/each}}

或者这样写法

{{each data value index}}

索引值：{{index}}

值：{{value.name}}

{{/each}}

在老版本中，写法如下

{{each data as value index}}

2、循环具体写法

{{each list}}

{{$index + 1}}、

名字：{{$value.name}}

年龄：{{$value.age}}

{{/each}}

var data = {

tem:"我是art-template",

list:[

{

name:"我是谁1",

age:18

},

{

name:"我是谁2",

age:19

},

]

};

//使用art-template的template(id, data)方法，然后根据id来渲染模板

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;

3、嵌套循环的写法：老版本，在chrome中暂时发现一个问题，下面each value.name  nameObj h这句代码中value.name  nameObj之间有两个空格才能渲染。

{{each list as value index}}

{{index + 1}}、

{{each value.name nameObj h}}

名字{{h}}：{{nameObj}}

{{/each}}

{{/each}}

var data = {

tem:"我是art-template",

list:[

{

name:["小芳","大芳"],

age:18

},

{

name:"我是谁2",

age:19

},

]

};

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;

五、art-template流程控制语句写法

{{if flag}}

{{if state == 1}}

失败

{{else if state == 2}}

成功

{{else}}

交易完成

{{/if}}

{{else}}

没有数据

{{/if}}

var data = {

flag:1,

state:1

};

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;

六、art-template自定义过滤器方法的使用

老版本的方式我们可以通过template.helper(name,fnCallBack)注册自定义方法，然后在模板{{}}调用，最新的版本中使用template.defaults.imports.name = function(state){}

{{each list as value index}}

{{index + 1}}、

时间：{{value.time}}

状态：{{handle(value.state)}}

{{/each}}

var data = {

tem:"我是art-template",

list:[

{

state:1,

time:"2017-11-11"

},

{

state:2,

time:"2017-11-11"

},

{

state:3,

time:"2017-11-11"

},

]

};

//自定义函数 ,新版的方法，template.defaults.imports.handle = function(state){}

template.defaults.imports.handle = function(state){

console.log(state);

if(state == 1){

return "失败"

}else if(state == 2){

return "成功"

}else if(state == 3){

return "交易完成"

}

};

//自定义函数-老版本的方法 template.helper("handle",function(state){}

template.helper("handle",function(state){

console.log(state);

if(state == 1){

return "失败"

}else if(state == 2){

return "成功"

}else if(state == 3){

return "交易完成"

}

});

//使用art-template的template(id, data)方法，然后根据id来渲染模板

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;

七、template.compile(source, options)函数的使用

编译模板并返回一个渲染函数。我们可以把模板可以直接写在JS中，再编译渲染，如

var source = '

• '

+ '{{each list value index}}'

+ '

索引 {{index + 1}} ：{{value}}'

+ '{{/each}}'

+ '

';

var render = template.compile(source);

var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']});

document.getElementById('my-id').innerHTML = html;

八、引用子模板

{{each list as value index}}

{{index + 1}}、

时间：{{value.time}}

状态：{{value.state}}

姓名：{{include 'children-template1' name}}

模板名字：{{include 'children-template2' data}}

{{/each}}

{{val}}

{{tem}}

var data = {

tem:"我是art-template",

list:[

{

state:1,

time:"2017-11-11"

},

{

state:2,

time:"2017-11-11"

},

{

state:3,

time:"2017-11-11"

},

],

name:{

val:"都是同一个人"

}

};

var html = template("template-mod",data);

document.getElementById('my-id').innerHTML = html;