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

2022-08-26 16:55:50

原生语法

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

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

     <% for (var i = ; i < products.length; i ++) { %>

         <% var product =products[i]; %>

         <% if (i < ) { %>

             <li>

                 <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">

                 <div class="flash-time-box">

                     <span>--</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 < }}

        <li>

            <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">

            <div class="flash-time-box">

                <span>--</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==}}

<img src="{{fileUrl}}{{v.message}}" alt="">

{{else if v.type==}}

{{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>

码农公寓