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