原生语法
使用原生语法,需要导入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">¥ <%=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">¥ {{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‘)%> |
简洁 | <code>{{product.price.value | formatPrice: ‘integer‘}}</code> |
简洁语法的传参有点奇怪,原生语法就很好理解,如果要传递三个参数,简洁语法该怎么写呢?
简洁语法的循环如果要做更多逻辑,也实现不了。
推荐使用原生语法
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;
这种方式的的缺点是,模板通过字符串拼接,不好维护,适合简单模板。
转自:https://www.jianshu.com/p/483fa7f6f55b
原文地址:https://www.cnblogs.com/hahajava/p/9080423.html
时间: 2024-11-02 04:21:52