Ember.js 入門指南——handlebars條件運算式

標籤：

 本系列文章全部從（http://ibeginner.sinaapp.com/）遷移過來，歡迎訪問原網站。

handlebars模板提供了與一般語言類似的條件運算式，比如if、if……else……。

在介紹這些條件運算式之前，我們先做好示範的準備工作。首先我會使用Ember CLI名稱建立route、template，然後在產生的template上編寫handlebars模板代碼。

先產生route：

ember generate route handlbars-conditions-exp-route

或者：ember generate route handlbarsConditionsExpRoute

這兩個命令產生的檔案名稱都是一樣的。最後Ember CLI會為我們自動產生2個主要的檔案：app/templates/ handlbars-conditions-exp-route.hbs  和 app/routes/ handlbars-conditions-exp-route.js

注意：如果你使用的是駝峰式的名稱Ember CLI 會根據Ember的命名規範自動產生以中劃線“-”分隔的名稱。還是就是我為什麼先產生route而不是template呢？？因為你產生route的同時Ember CLI會自動給你產生一個對應的模板檔案，如果你是先產生template的話，你還需要手動再執行產生route的命令，即你要執行2條命令(ember generate template handlbars-conditions-exp-route和ember generate route handlbars-conditions-exp-route)。

得到示範所需要的檔案後回到正題，開始介紹handlebars的條件判斷運算式。

為了示範先在route檔案添加類比條件代碼：

//  app/routes/handlebars-condition-exp-route.js import Ember from ‘ember‘; export default Ember.Route.extend({        model: function () {              return {name: ‘i2cao.xyz‘, age: 25, isAtWork: false, isReading: false };              // return { enable: true };       }            });

    對於route這個檔案的內容會在後面route這一章詳細介紹，你可以暫且當做是返回了一個對象到頁面上。與EL運算式非常類似，你可以用“.”擷取對象裡的屬性（如：person.name）。

1，  if運算式

 <!-- app/templates/handlbars-conditions-exp-route.hbs --> <!-- if判斷標籤，當熟悉model的值不為 false, undefined, null or [] 的時候顯示標籤內的內容 -->{{#if model}}Welcome back, <b>{{model.name}}</b> !{{/if}}

每個條件運算式都要以“#”開頭並且要有對應的關閉標籤。

啟動並執行時候需要注意兩個地方，一個是URL。如果你也是使用駝峰式的命名方式（產生命名：ember generate route handlbarsConditionsExpRoute），那你的URL跟我的是一樣的，反正你只要記得執行的URL跟你產生的route的名稱是一致的。當然這個名字是可以修改的。在app/router.js裡面修改，在Router.map裡的代碼也是Ember CLI自動產生的。我們可以看到有一個“this.route(‘handlebarsConditionsExpRoute‘);”這個就是你的路由的名稱。

建議：產生之後的路由名字最好不要修改，ember 會根據預設的命名規範尋找route對應的template，如果你修改了router.js裡的名字你需要同時修改app/routes 和 app/templates 裡相對應的檔案名稱。否則URL上的路由無法找到對應的template顯示你的內容。

說明：可能你看到的我給你的有點差別，是因為我修改了主模板(app/index.html)你可以在這個檔案裡添加自己喜歡的樣式，在此就不再贅述，這個不是本文的重點。

2，  if……else……運算式

<!-- app/templates/handlebars-conditions-exp-route.hbs --><!-- if……else……判斷 -->{{#if model.isAtWork}}Ship that code..<br>{{else if model.isReading}}You can finish War and Peace eventually..<br>{{else}}This is else block...{{/if}}

結果是輸出：This is else block...

因為isAtWork和isReading都是false。讀者可以自己修改app/routes/handlebars-condition-exp-route.js裡面對應的值然後查看輸出結果。

3，  unless運算式

unless運算式類似於非操作，當model.isReading值為false的時候會輸出運算式裡面的內容。

<!-- app/templates/handlebars-conditions-exp-route.hbs --><!-- 非判斷 -->{{#unless model.isReading}}unless.....{{/unless}}

如果isReading值為false會輸出unless…否則不進入運算式內。

4，  在HTML標籤內使用運算式

handlebars運算式可以直接在嵌入到HTML標籤內。

<!-- app/templates/handlebars-conditions-exp-route.hbs --><!-- 可以把運算式直接嵌入在某個標籤中，當enable的值為true則結果是增加了一個類(css的類)enable，否則增加‘disable‘ --><span class={{if enable ‘enable‘ ‘disable‘}}>enable or disable</span>

上述運算式其實就是一個三目運算。不難理解。

       上述就是handlebars中最常用的幾個條件運算式，自己作為小例子示範一遍肯定懂了，對於有點驚訝的開發人員甚至看一遍即可。非常的簡單，可能後面還會有其他的條件判斷的運算式，後續會補上。

如果你需要完整的代碼可以從github上下載。

Ember.js 入門指南——handlebars條件運算式