template.js的使用

文档地址：https://aui.github.io/art-template/zh-cn/docs/syntax.html

参考博客：https://blog.csdn.net/gao_xu_520/article/details/78594792
参考博客：https://blog.csdn.net/qq_33401924/article/details/53259631

在模板中运用三元运算符

 <b class="fl {{v.MatchWin==1?'win':''}}">{{v.ScoreA}}</b>

在模板中的 if elseif 语法的运用

 {{if v.MatchStatus == 1}}
 <em>未开始</em>
  {{else if v.MatchStatus == 2}}
  <em>进行中</em>
  {{else}}
    <em>已结束</em>
   {{if}}
 

在模板中template.helper， 用来处理模板中参数的函数

第一种情况：

//这里的script的id对应下面template的渲染区域，并且type必须是text/html

注：1.这里的 {{each result as value i}} ，i也可以写成index，代表索引号； value是每一项是value；
2. {{#value.img}}，这种前面加#号的，表示 不编码输出，例这里这样写是因为后台取回来的img是含有img标签的了，所以直接输出就可以，不需要编码

$(function () {

$.ajax({
url:‘http://192.168.16.27:9090/api/getindexmenu’,
type:‘get’,
dataType:‘json’,
success:function (result) {
var html= template(‘template’,result);//这里的 template(‘template’,result)对应2步的script的id
console.log(result);
$(’#content’).append(html);//写法1
document.getElementById(“content”).innerHTML = html;// 写法2
}

})

});

第二种情况：
另一种情况，当取回来的数据是多组对象的形式，如下：（跟上面的对比就是一组数据跟多组数据）
var data={
0:{iNewsId: “1”, sTitle: “哈哈哈1”, iFrom: “22334”, sGameVersion: “”, sAuthor: “奇迹”},
1:{iNewsId: “2”, sTitle: “哈哈哈2”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
2:{iNewsId: “3”, sTitle: “哈哈哈3”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
3:{iNewsId: “4”, sTitle: “哈哈哈4”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
4:{iNewsId: “5”, sTitle: “哈哈哈5”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
5:{iNewsId: “6”, sTitle: “哈哈哈6”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
6:{iNewsId: “7”, sTitle: “哈哈哈7”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
7:{iNewsId: “8”, sTitle: “哈哈哈8”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
8:{iNewsId: “9”, sTitle: “哈哈哈9”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”},
9:{iNewsId: “10”, sTitle: “哈哈哈10”, iFrom: “22334”, sGameVersion: “”, sAuthor: “游戏网”}
}

var datalist={‘list’:data}
var html = template(‘test’, datalist);
document.getElementById(“content”).innerHTML = html;

第三种情况：
这要要说明一点，使用template()方法的时候，参数2 一定要传入对象，对象！
如果数据是数组的话，就要包装成对象，举个例子。返回的是arrA 数组，可以这样包装
var obj={
data:arrA
};

//假设ajax获取到的数据需要手动转化成对象的形式，如下：

success:function (data) {
console.log(data);
// 转化为js对象 数组
var jsArr = JSON.parse(data);
// 包装为js对象
var obj ={
items:jsArr
};
// 调用模板引擎的方法，填充数据
var result = template(‘template’,obj);
$(’.container’).append(result);
}

例：后台取回来的json数据如下
[
{
“path”:“images/1.jpg”,
“name”:" 那阳光，灿烂到心底",
“star”:“6977”,
“message”:“188”
},{
“path”:“images/2.jpg”,
“name”:" 守望者",
“star”:“9012”,
“message”:“188”
},{
“path”:“images/3.jpg”,
“name”:" 日落黄昏时",
“star”:“9012”,
“message”:“188”
}
]

注意：拿回来的数据必须是对象的健值对的形式
success:function (data) {
console.log(data);
// 包装为js对象
var obj ={
items:data
};
// 调用模板引擎的方法，填充数据
var datalist = { ‘list’: obj.items }
var html = template(‘test’, datalist);
document.getElementById(“content”).innerHTML = html;
}
这时，在模板里面用{{value.name}}，可得到渲染；

template的条件判断写法：
{{if value}} … {{/if}}
{{if v1}} … {{else if v2}} … {{/if}}

核心方法：
// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

标准语法：
{{value}}
{{data.key}}
{{data[‘key’]}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

语法：（注意，如果each后面没有跟value，index，则下面渲染的时候前面跟$,会默认有value，index，如果each这里有写value，index，则下面渲染的时候不需要加上$）
{{each target}}
{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{value}}
{{/each}}

在js中存放模板
template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，如果使用了 id 参数，可以使用template.render(id, data)渲染模板。

var source =
‘

• ’

• ‘<% for (var i = 0; i < list.length; i ++) { %>’

•    '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
  

• ‘<% } %>’
• ‘

’;

var data = {
list: [‘文艺’, ‘博客’, ‘摄影’, ‘电影’, ‘民谣’, ‘旅行’, ‘吉他’]
};

var render = template.compile(source);
var html = render(data);
document.getElementById(‘content’).innerHTML = html;

上面的这种也可以写成下面这种方式：
模板包含表达式 ----->用于嵌入子模板。
{{include ‘template_name’}}

参考博客：https://blog.csdn.net/weinichendian/article/details/79496074