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上下載。