原生语法

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

        }

    }

});

原生语法与简洁语法比较

简洁语法的传参有点奇怪，原生语法就很好理解，如果要传递三个参数，简洁语法该怎么写呢？

简洁语法的循环如果要做更多逻辑，也实现不了。

推荐使用原生语法

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;

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