artTemplate的使用总结

2017-07-06 22:41 阅读 1,481 次 评论 0 条

原生语法

使用原生语法,需要导入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;

这种方式的的缺点是,模板通过字符串拼接,不好维护,适合简单模板。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:artTemplate的使用总结 | 猿笔记

发表评论


表情