关于arttemplate的使用

Posted 2020-06-08

精简版写法

引用：template.js

1、普通使用方法。

　　json集合：

　　　data =　{"userlist":[{"username":"aa","age":"19","sex":"男"},{"username":"bb","age":"25","sex":"女"}]}

　　html代码

　　function getUserList(){

　　　　var _html= template(‘user_list‘, data);   //template("模版名","数据集")

　　}

 

//模版代码　

<script id="user_list" type="text/html">

　　{{each userlist as value i}}
 　　<span>姓名：{{value.username}}</span>

　　<span>性别：{{value.sex}}</span>

　　<span>年龄：{{value.age}}</span>

　　{{/each}}
</script>

2、复合对象使用方法。

有些比较复杂的json字符串会出现内部json内容无法解析的问题。例如下面的imgList在使用的过程中没有解析出来，下面就简单说明怎么在arttemplate中使用这样的数据

data =

　　{

　　　　"commentList":

　　　　　　[

　　　　　　　　{

　　　　　　　　　　"addTime":"2016年01月25日",

　　　　　　　　　　"Score":5,

　　　　　　　　　　"comments":"满意满意",

　　　　　　　　　　"imgList":"[{"src":"8969288f4245120e7c3870287cce0ff3.jpg"},{"src":"bdf3bf1da3405725be763540d6601144.jpg"}]"

　　　　　　　　}

　　　　]

}

a、嵌套循环

　　<script>

　　　

　　//　‘_json_‘方法名，str：参数

template.helper(‘_json_‘, function(str){
　　return $.parseJSON(str);
});

 

var _html= template(‘comment_list‘, data);   //template("模版名","数据集")

　　</script>

//模版代码　

<script id="comment_list" type="text/html">

　　{{each commentList as value i}} 
 　　<span>时间：{{value.addTime}}</span>

　　<span>分数：{{value.Score}}</span>

　　<span>评论：{{value.comments}}</span>

　　<span>图片：

　　　　{{value.imgList=_json_(value.imgList)}}  //将没有解析出来的imgList解析出来，_json_为前面自定义的方法名，这样就可以把未解析的json重新解析一次

　　

{{each value.imgList as img i}}

　　<img src ="{{img.src}}"/>

{{/each}}

　　</span>

　　{{/each}}
</script>

b、引入模版（写法几乎一样，唯一不同的就是嵌套的那个循环）

//模版代码　

<script id="comment_list" type="text/html">

　　{{each commentList as value i}} 
 　　<span>时间：{{value.addTime}}</span>

　　<span>分数：{{value.Score}}</span>

　　<span>评论：{{value.comments}}</span>

　　<span>图片：

　　　　{{value.imgList=_json_(value.imgList)}}  //将没有解析出来的imgList解析出来，_json_为前面自定义的方法名，这样就可以把未解析的json重新解析一次

　　

{{include ‘imglist‘ value.imgList}}//注意：这种写法imgList就需要将json内容进行修改,增加imgs，"imgList":"{"imgs":[{"src":"8969288f4245120e7c3870287cce0ff3.jpg"},{"src":"bdf3bf1da3405725be763540d6601144.jpg"}]"}

　　</span>

　　{{/each}}
</script>

<script type="text/html" id="imglist">
　　{{each imgs as img i}}
 
　　　　{{img.src}}
 
　　{{/each}}
 
</script>