原生語法
使用原生語法，需要導(dǎo)入template-native.js文件。
在HTML中定義模板，注意模板的位置，不要放到被渲染區(qū)域，防止模板丟失。
<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">￥ <%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
</span>
</div>
</li>
<% } %>
<% } %>
</script>
template(id, data)
渲染數(shù)據(jù)到頁面
$('#main_panel').html(template('main_panel_big_sale_template', data));
簡潔語法
使用簡潔語法，導(dǎo)入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">￥ {{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
</span>
</div>
</li>
{{/if}}
{{/each}}
</script>
渲染數(shù)據(jù)到頁面，和原生語法一樣
$('#main_panel').html(template('main_panel_big_sale_template', data));
調(diào)用外部函數(shù)
template.helper
上面的例子中，都調(diào)用了formatPrice函數(shù)，要調(diào)用此函數(shù)需要通過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";
}
}
});
原生語法與簡潔語法比較
| 語法類型 | 調(diào)用外部函數(shù) |
|---|---|
| 原生 | <%=formatPrice(product.promoPrice,'integer')%> |
| 簡潔 | <code>{{product.price.value | formatPrice: 'integer'}}</code> |
簡潔語法的傳參有點奇怪，原生語法就很好理解，如果要傳遞三個參數(shù)，簡潔語法該怎么寫呢？
簡潔語法的循環(huán)如果要做更多邏輯，也實現(xiàn)不了。
推薦使用原生語法
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;
這種方式的的缺點是，模板通過字符串拼接，不好維護，適合簡單模板。
