art-template有点类似ejs,将通过js传过来的的数据,在html里面渲染,
但是art-template是要在<script></script>
标签中渲染。
引入模板
//html文件中
<script id="J_goods_list" type="text/html">
</script>
比如我们在对应的js文件中拿到了数据,然后将数据传给html
js文件中
//请求得到的数据res.result,通过上面模板的id:J_goods_list传入
var res3 = template('J_goods_list',res.result);
//将渲染好的模板加到对应的地方.J_goods_list
$('.J_goods_list').append(res3);
渲染
上面基本的做好之后,就可以进行渲染模板了,以下写了一些基本语法供参考,
比如循环each,if判断,循环或判断都需要闭合
{
{each list value}} each需要闭合 {
{/each}}
{
{if value==1}} if需要闭合 {
{/if}}
<script id="J_goods_list" type="text/html">
//each循环,list是拿到的数据中的list,重新命名为value
{
{
each list value}}
//if判断
{
{
if value.type == 'list'}}
<div class="home-standard">
<div class="h-title">
//两个花括号{
{}}放置变量
<i></i><h3><a href="{
{value.url}}">{
{
value.title}}</a></h3>
</div>
{
{
if value.banner_list[0]}}
<div class="left-sidebar">
<a href="{
{value.banner_list[0].url}}" target="_blank"><img src="{
{value.banner_list[0].image}}" alt="{
{value.title}}"></a>
</div>
//if需要闭合
{
{
/if}}
<div class="layout-1">
<ul class="list">
//each 还是循环,这次是循环value里面的,相当于二次循环
{
{
each value.goods_list val}}
<li>
<div class="goods-img">
<a href="{
{val.url}}" target="_blank"><img src="{
{val.image}}" alt="{
{val.goods_name}}"></a>
</div>
<div class="goods-info">
<div class="goods-name"><a href="{
{val.url}}" class="line2" target="_blank">{
{
val.goods_name}}</a></div>
<div class="price">¥{
{
val.price}}</div>
{
{
if val.promotion.is_presell==0 && val.promotion.is_snap_up==0}}
<div class="add-cart J_cart_box" data-goods_id="{
{val.goods_spec_id}}"><i class="icon-cart"></i></div>
{
{
/if}}
<div class="sale-tip-label">
{
{
each val.promotion.labels v2}}
<span>{
{
v2}}</span>
{
{
/each}}
</div>
</div>
</li>
//each也需要闭合
{
{
/each}}
</ul>
</div>
</div>
{
{
/if}}
{
{
/each}}
</script>