作为一个新入行没几个月的菜鸟,这些日子写了两个不同的购物车。
对于购物车中物品的显示用到了handlebars这个模块引擎。
开始的时候对这个东西并不是很了解,经过前辈的讲解以及自己查阅的资料。
发现了其实这个东西还是挺好用的,下面就是我遇到的两种情况。
-------------------------------------------
第一种:其实就是简单将购物车中的物品查出来并循环显示出来。
这种情况用handlebars来完成感觉十分方便。
首先我们需要引用插件。
<script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script/handlebar/1.3.0/handlebars.min.js"></script>
<script type="text/javascript" src="script/handlebar/1.3.0/helpers.js"></script>
//在JS中需要注册一个handlebars模板
//$("#xx-template").html()是jquery语法。
var myTemplate = Handlebars.compile($("#xx-template").html());
//将json对象用刚刚注册的Handlebars模板封装,得到最终的html,插入到table中。
$("#xxlist").html(myTemplate(data));
//html中
显示的地方为
<div id="xxlist">
循环显示下面id="xx-template"中的东西
<div>
id用来唯一的确定一个模块,type中是固定写法
<script id="xx-template" type="text/x-handlebars-template">
{{#each data}}
这里可以写样式,获取字段等等
获取字段的格式为{{xx}}
{{/each}}
</script>
-------------------------------------------
第二种:
这种相对来说比较复杂,
购物车中需要先把地址信息循环出来,
再在每一条地址信息下循环显示出所对应的商品。
当想要放弃使用Handlebars的时候,
发现了这种嵌套的情况也可以是用的方法。
这种情况第一种循环的方式同上,
但是需要在each中嵌套each,
第二层本身就是一个信息列表,是属于所有的,
我们先在第一层each中遍历了所有地址,
然后再遍历每个地址的商品信息,这样就形成了each嵌套。
这个时候,{{xx}}的方法只能取到当前each中的数据,
如果想在内层each取到上层each的数据,可以使用{{../xx}}
-------------------------------------------
延伸扩展
在Handlebars中,if..else功能有严重的不足
这个时候也有很好的解决办法
只需要注册一个比较大小的Helper就可以了。
具体操作如下。
JS中:
var myTemplate = Handlebars.compile($("#xx-template").html());
//在这里注册一个比较大小的Helper,判断x1是否大于x2
Handlebars.registerHelper("compare",function(x1,x2,options){
if(x1>x2){
//满足条件执行
return options.fn(this);
}else{
//不满足执行{{else}}部分
return options.inverse(this);
}
});
$("#xxlist").html(myTemplate(data));
html中
<script id="xx-template" type="text/x-handlebars-template">
{{#each data}}
{{#if ...}}
{{#compare ...}}
{{else}}
{{/compare}}
{{/if}}
{{/each}}
</script>