作為一個新入行沒幾個月的菜鳥，這些日子寫了兩個不同的購物車。
對於購物車中物品的顯示用到了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>