arttemplate

大貓一隻

 

• 博客園
• 首頁
• 新聞
• 新隨筆
• 聯繫
• 管理
• 訂閱

隨筆- 28  文章- 0  評論- 0 

artTemplate的使用總結

原生語法

使用原生語法，須要導入template-native.js文件。

在HTML中定義模板，注意模板的位置，不要放到被渲染區域，防止模板丟失。

<script id="main_panel_big_sale_template" 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('main_panel_big_sale_template', data));

簡潔語法

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

<script id="main_panel_big_sale_template" 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('main_panel_big_sale_template', data));

調用外部函數

template.helper

上面的例子中，都調用了formatPrice函數，要調用此函數須要經過helper方法註冊：

template.helper('formatPrice', function(price, type) {
    if(price){
        var arrayPrice = price.toString().split(".");
        if(type == 'integer') {
            return arrayPrice[0]?arrayPrice[0]:"0";
        }else if (type =='decimal') {
            return arrayPrice[1]?arrayPrice[1].length == 1?"."+arrayPrice[1]+"0":"."+arrayPrice[1]:".00";
        }
    }else{
        if(type == 'integer') {
            return "0";
        }else if (type =='decimal') {
            return ".00";
        }
    }
});

原生語法與簡潔語法比較

語法類型	調用外部函數
原生	<%=formatPrice(product.promoPrice,'integer')%>
簡潔	{{product.price.value | formatPrice: 'integer'}}

簡潔語法的傳參有點奇怪，原生語法就很好理解，若是要傳遞三個參數，簡潔語法該怎麼寫呢？

簡潔語法的循環若是要作更多邏輯，也實現不了。

推薦使用原生語法

template.compile

模板能夠直接寫在JS中，再編譯渲染。

var source = '<ul>'
+    '<% for (var i = 0; i < list.length; i ++) { %>'
+        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
+    '<% } %>'
+ '</ul>';

var render = template.compile(source);
var html = render({list: ['攝影', '電影', '民謠', '旅行', '吉他']});
document.getElementById('content').innerHTML = html;

這種方式的的缺點是，模板經過字符串拼接，很差維護，適合簡單模板

 

文／ilaoke（簡書做者）
原文連接：http://www.jianshu.com/p/483fa7f6f55b
著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。

posted @ 2016-10-19 14:11 大貓一隻 閱讀(...) 評論(...) 編輯 收藏

 

刷新評論刷新頁面返回頂部

Copyright ©2017 大貓一隻