art文档为什么不能html,art-template4.0使用

art-template

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

基础数据渲染

输出HTML

流程控制

遍历

调用自定义函数方法

子模板引入

基础数据渲染

一、引入art-template.js文件

二、编写HTML模板

{{title}}

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

var data = {

title:"hello world"

};

var html = template("test",data);

document.getElementById('content').innerHTML = html;

输出HTML

{{title}}

//注意：{{title}}这是对内容编码输出，应该写成{{#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里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

{{if bok==22}}

线上

{{else if bok==33}}

隐藏

{{else}}

走这里

{{/if}}

var data = {

"bok":22

};

var html = template('test',data);

document.getElementById("app").innerHTML = html;

嵌套的写法

{{if bok}}

{{if list.length>=0}}

{{each list}}

{{$index}}:{{$value}}

{{/each}}

{{else}}

没有数据

{{/if}}

{{/if}}

var data = {

"bok":true,

list:["a","b","c"]

};

var html = template('test',data);

document.getElementById("app").innerHTML = html;

循环遍历语句

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

{{if c==100}}

{{each person}}

编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}

{{/each}}

{{/if}}

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;

调用自定义方法

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

{{if c==100}}

{{each person}}

姓名：{{$value.name}}--性别：{{$value.sex|show}}

{{/each}}

{{/if}}

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.defaults.imports.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;

var html = template("test",data);

document.getElementById("app").innerHTML = html;

调用子模板

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

{{each list}}

{{$value}}

{{/each}}

{{each person}}

{{$value.name}}

{{/each}}

{{include 'main' a}}

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;