Handlebars嵌套及if判斷

做爲一個新入行沒幾個月的菜鳥，這些日子寫了兩個不一樣的購物車。

對於購物車中物品的顯示用到了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>