原生語(yǔ)法

使用原生語(yǔ)法，需要導(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">￥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span></span></div></li><% } %><% } %> </script>

template(id, data)

渲染數(shù)據(jù)到頁(yè)面

$('#main_panel').html(template('main_panel_big_sale_template', data));

簡(jiǎn)潔語(yǔ)法

使用簡(jiǎn)潔語(yǔ)法，導(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">￥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span></span></div></li>{{/if}}{{/each}} </script>

渲染數(shù)據(jù)到頁(yè)面，和原生語(yǔ)法一樣

$('#main_panel').html(template('main_panel_big_sale_template', data));

調(diào)用外部函數(shù)

template.helper

上面的例子中，都調(diào)用了formatPrice函數(shù)，要調(diào)用此函數(shù)需要通過(guò)helper方法注冊(cè)：

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";}} });

原生語(yǔ)法與簡(jiǎn)潔語(yǔ)法比較

語(yǔ)法類型調(diào)用外部函數(shù)

原生	<%=formatPrice(product.promoPrice,'integer')%>
簡(jiǎn)潔	{{product.price.value | formatPrice: 'integer'}}

簡(jiǎn)潔語(yǔ)法的傳參有點(diǎn)奇怪，原生語(yǔ)法就很好理解，如果要傳遞三個(gè)參數(shù)，簡(jiǎn)潔語(yǔ)法該怎么寫呢？

簡(jiǎn)潔語(yǔ)法的循環(huán)如果要做更多邏輯，也實(shí)現(xiàn)不了。

推薦使用原生語(yǔ)法

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;

這種方式的的缺點(diǎn)是，模板通過(guò)字符串拼接，不好維護(hù)，適合簡(jiǎn)單模板。

arttemplate嵌套循環(huán)，包含調(diào)用外部函數(shù)，直接看例子：

{{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">無(wú)摘要</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()">查看詳細(xì)信息</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()">查看詳細(xì)信息</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()">查看詳細(xì)信息</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()">查看詳細(xì)信息</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);

總結(jié)

以上是生活随笔為你收集整理的artTemplate的使用总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。