artTemplate 简介语法模板

1.编辑模板，template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

如果没有 data 参数，那么将返回一渲染函数。data参数的类型是object。有data那么就返回Html。

 

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;


//渲染数据
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html

 

1.

"code" class="javascript">
　　"test" type="text/html">   2.{{if admin}}   3.    {{each list as value index}}   4.        

{{index}}:{{value}}

   5.    {{/each}}   6.{{else if}}   7.条件判断   8.{{/if}}    

·  

2.语法

• 表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

• 输出表达式

对内容编码输出：也就是相当于.text(),内容输出带有html标签

{{content}}

不编码输出： 也就是相当于.html(),内容输出没有带html标签

{{#content}} 

注意：编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

 

• 条件表达式

{{if admin}}
    
admin

{{else if code > 0}}
    
master

{{else}}
    
error!

{{/if}}

•  {{if value==="BUY_A_DISCOUNT_B" && BuyADiscountBTypeValue==="A_NOT_DISCOUNT_B_DISCOUNT"}}
   
  class="presentCourseList promptionRequired specialTipsPro" data-tipsPro="添加B范围的课程">
   class="btn btn-primary margin-top-10 addPresentCourse ">添加B产品课程
   
  class="unPresentCourseList  hidden">
   class="btn btn-primary margin-top-10 addUnPresentCourse hidden">优惠排除条件
   {{/if}}

   

• 遍历表达式

无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
    
{{index}} - {{value.user}}

{{/each}}

//亦可以被简写：
{{each list}}
    
{{$index}} - {{$value.user}}

{{/each}}

3.artTemplate模板中的简洁语法循环嵌套

试试 {{each albums ...}} 改成 {{each $value.albums ...}}

 

• 模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：

{{include 'template_name' news_list}}

• 辅助方法

嵌入子模板(include)

嵌套模板跟第一种方法原理相同，只不过在一个模板中调用了另外一个模板而已。

 使用子模板时请注意

1：不在模板里放大括号，即：

 

2：在模板最后填上null

上面代码中，要注意几点的就是：

　　♥ 遍历表达式中的list必须与脚本中data对象中的list同名，而且遍历表达式中的list必须是data对象中的一个属性。循环表达式中，要循环的是每一个data对象中的list数组，而不是data对象，这点很重要。

　　在这个例子中，data对象中list属性是一个数组，数组中的每一个值都是简单数据类型，篮球桌球等。当然，可以往数组中传入复杂数据类型，如对象。说明这个主要是因为在循环表达式中循环的数据和给template()传入第二个参数的时候很容易出错。

　　♥ 使用template方法时，第一个参数必须是id，而不能是class。

 

使用template.helper(name, callback)注册公用辅助方法：

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

模板中使用的方式：

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持传入参数与嵌套使用：

{{time | say:'cd' | ubb | link}}

   //调用的方法

template.helper('paidStatusText', function (data) {

if(data == 'PAYING'){

return "

付款中

";

}else if(data == 'UNPAY'){

return "

未付款

";

}else if(data == 'PAID'){

return "

已付款

";

}

})

template.helper('quantityText', function (data,amount) {

　　 return data+"课时 / "+amount.toFixed(2)+"元";

})

template.helper('seatNumText', function (data) {

　　return data == null?"-":data;

})

template.helper('remainHourText', function (data,fund) {

　　 return data+"课时 / "+fund.toFixed(2)+"元";

})

 

 

　　namesArry = [{ studentName: studentNames, nameLast: studentNames.substr(studentNames.length - 1, 1) }]

　　var dom = $(template('selectedStudentsTemplate', { namesArry: namesArry }));

　　modal.find("#selectedStudents").append(dom);

 

 

转载于:https://www.cnblogs.com/susan-home/p/8548579.html