art-template php,javascript的模板引擎art-template常用操作介绍

本篇文章给大家带来的内容是关于javascript的模板引擎art-template常用操作介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

art-template

javascript 模板引擎，官网：https://github.com/aui/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}}--性别：{{show($value.sex)}}

{{/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.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;

调用子模板

{{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;