art-template模板渲染及其过滤器

原生语法

  使用原生语法,需要导入template-native.js文件。在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失。

复制代码
 1 <script id="tpl" type="text/html">
 2     <% for (var i = 0; i < products.length; i ++) { %>
 3         <% var product =products[i]; %>
 4         <% if (i < 3) { %>
 5             <li>
 6                 <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
 7                 <div class="flash-time-box">
 8                     <span>2015-02-09</span>
 9                 </div>
10                 <strong class="marque"><%=product.name%></strong>
11                 <strong class="libelle"><%=product.description%></strong>
12                 <div class="no-picto">
13                     <span class="prod-tip">
14                         <img src="img/grey.png" data-original="img/icon.png">
15                     </span>
16                     <span class="italic black">
17                         <span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
18                     </span>
19                 </div>
20             </li>
21         <% } %>
22     <% } %>
23 </script>
复制代码

template(id, data)

  渲染数据到页面

$('#main_panel').html(template('tpl', data));

简洁语法

  使用简洁语法,导入template-web.js文件。

复制代码
 1 <script id="tpl" type="text/html">
 2    {{each products as product i}}
 3    {{if i < 3}}
 4        <li>
 5            <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
 6            <div class="flash-time-box">
 7                <span>2015-02-09</span>
 8            </div>
 9            <strong class="marque">{{product.name}}</strong>
10            <strong class="libelle">{{product.description}}</strong>
11            <div class="no-picto">
12                 <span class="prod-tip">
13                     <img src="img/grey.png" data-original="img/icon.png">
14                 </span>
15                 <span class="italic black">
16                     <span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
17                 </span>
18            </div>
19        </li>
20    {{/if}}
21    {{/each}}
22 </script>
复制代码

  渲染数据到页面,和原生语法一样

$('#main_panel').html(template('tpl', data));

  如果是下边的这种渲染方式

$('#main_panel').html(template('tpl', data.products)); // 传入的是数组

  那么在each循环中就应该为:{{each $data as product i }}

 

 

art-template 条件表达式

{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

 

 模板包含表达式

  用于嵌入子模板。

{{include 'template_name'}}

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

{{include 'template_name' news_list}}

 

art-template过滤器

 语法:

template.defaults.imports.过滤器名称 = function(date){
    过滤器的内容
    一定要注意 需要一个返回值
};

   

 

art-template嵌套循环

复制代码
// 模板
<script type="text/html" id="phone_tpl">
{{each data v i}}
{{if v.type==2}}
<img src="{{fileUrl}}{{v.message}}" alt="">
{{else if v.type==1}}
{{include 'text_tpl' v.text}}
{{/if}}
{{/each}}
</script>

<script type="text/html" id="text_tpl">
{{each $data vv ii}}
<div class="phone-text">{{vv}}</div>
{{/each}}
</script>
复制代码

 

posted @   ~逍遥★星辰~  阅读(3783)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示