art-template模板渲染及其過濾器

原生語法

　　使用原生語法，需要導入template-native.js文件。在HTML中定義模板，注意模板的位置，不要放到被渲染區域，防止模板丟失。

<script id="tpl" type="text/html">
    <% for (var i = 0; i < products.length; i ++) { %>
        <% var product =products[i]; %>
        <% if (i < 3) { %>
            <li>
                <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
                <div class="flash-time-box">
                    <span>2015-02-09</span>
                </div>
                <strong class="marque"><%=product.name%></strong>
                <strong class="libelle"><%=product.description%></strong>
                <div class="no-picto">
                    <span class="prod-tip">
                        <img src="img/grey.png" data-original="img/icon.png">
                    </span>
                    <span class="italic black">
                        <span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
                    </span>
                </div>
            </li>
        <% } %>
    <% } %>
</script>

template(id, data)

　　渲染數據到頁面

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

簡潔語法

　　使用簡潔語法，導入template-web.js文件。

<script id="tpl" type="text/html">
   {{each products as product i}}
   {{if i < 3}}
       <li>
           <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
           <div class="flash-time-box">
               <span>2015-02-09</span>
           </div>
           <strong class="marque">{{product.name}}</strong>
           <strong class="libelle">{{product.description}}</strong>
           <div class="no-picto">
                <span class="prod-tip">
                    <img src="img/grey.png" data-original="img/icon.png">
                </span>
                <span class="italic black">
                    <span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
                </span>
           </div>
       </li>
   {{/if}}
   {{/each}}
</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>