原生語法

使用原生語法，需要導入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嵌套循環，包含調用外部函數，直接看例子：

{{each data.results}} <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ana_btn3"><div class="thumbnail" style="border: 0 solid white">{{if $value.thumbnail == null}}<img src="" alt="Responsive image" style="width: 99%">{{else}}<img src="{{}}" alt="Responsive image" style="width: 99%">{{/if}}<div class="caption"><h3 style="color: #1b6d85; text-align: center">{{$value.title}}</h3>{{if $value.snippet == null}}<p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">無摘要</p>{{else}}<p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">{{$value.snippet}}</p>{{/if}}{{each $value.tags as tag i}}{{if tag === option.panelLeftTree.sites[0].nodes[0].zhName}}<p style="margin-top: 20px;text-align: center"><a class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看詳細信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.webmapPortal + $value.id}}" target="_blank" class="btn btn-default" role="button" id="mapOpen" >在地圖中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[1].zhName}}<p style="margin-top: 20px;text-align: center"><a class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看詳細信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.sencePortal + $value.id}}" target="_blank" class="btn btn-default" role="button" id="mapOpen" >在地圖中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[2].zhName}}<p style="margin-top: 20px;text-align: center"><a class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看詳細信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.chartVisual + $value.id}}" target="_blank" class="btn btn-default" role="button" id="mapOpen" >在地圖中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[3].zhName}}<p style="margin-top: 20px;text-align: center"><a class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看詳細信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.gangedVisual + $value.id}}" target="_blank" class="btn btn-default" role="button" id="mapOpen" >在地圖中查看</a></p>{{/if}}{{/each}}<p style="color: #dddddd; margin-top: 20px;text-align: center" id="fomateTime">{{formatDate($value.modified)}}</p></div></div> </div> {{/each}}

var irender = template.compile(info);
?var ihtmlItem = irender(infoData);

$("#testView").html(ihtmlItem);

總結

以上是生活随笔為你收集整理的artTemplate的使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。