码迷,mamicode.com
首页 > 其他好文 > 详细

artTemplate的使用总结

时间:2017-12-14 03:19:38      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:rip   template   message   pos   html   get   add   var   list   

1.首先先要下载artTemplate.js,这个可以在官网下载也可以在GitHob进行下载。

2.现在是编写一个存放html标签的编写模板,使用<script type="text/html" id="site_template"></script>装载,里面的id是你到时候将确认将数据传给谁的绑定,详情请看下面代码

<script type="text/html" id="site_template">
{{each list as value i}}
<div class="content">
<div class="message flex">
<span>{{value.conactName}}</span>
<span>{{value.conactphone}}</span>
</div>
<p>{{value.address}}{{value.addressInfo}}</p>
</div>
{{/each}}
</script>
注:这个时候要说了编写模板的话有简洁语法和原声语法,我这里用的就是简洁语法,然后我自己也比较推荐使用,他相对原声语法的话比较简单也利于实用
原声语法就这总:
    <%if (potics){%>
    <%include(‘potics_content‘)%>
    <%for (var i=0;i<list.length;i++) {%>
    <div><%=i%>. <%=list[i].content%></div>
    <%}%>
    <%}%>
相当于就是把你所要用的原声js拿<%%>包起来而已

3.然后就是渲染模板,下放代码只是模仿的数据,如果小伙伴的数据是从后台获取上来就把你从ajax获取的data数据换上就好啦

var data = {
title: ‘你好‘,
list: [‘士力架‘, ‘糖葫芦‘, ‘草‘, ‘土‘, ‘牛肉‘, ‘鸡‘, ‘鸭‘]
};
var html = template(‘site_template‘, data);//这个就是用来连接编写模板和渲染模板的
document.getElementById(‘wrap‘).innerHTML = html;//而这个是把连接好的html和数据传到你想要把html放在的哪个标签里面
 
然后artTemplate的大概使用就介绍到这里了

artTemplate的使用总结

标签:rip   template   message   pos   html   get   add   var   list   

原文地址:http://www.cnblogs.com/zhiyushushi/p/8035291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!