#3 條件判斷

英文原版：https://guides.emberjs.com/v2.13.0/templates/conditionals/

像比如if 或者 unless這樣的語句，在Ember中也被作爲助手實現了。助手有三種被調用的方式，下面就來了解每種的調用方式。

行內調用

第一種—- 行內調用。這看上去就與顯示屬性的寫法差不多，不過需要接收參數：

<div>
  {{if isFast "zoooom" "putt-putt-putt"}}
</div>

在上面的代碼中，當isFast爲true時，{{if}}助手會會返回”zoooom”；反之，會返回 “putt-putt-putt”。助手通過行內表達式的形式被調用，就像之前的章節中，我們區顯示一個屬性一樣的寫法。

行內助手不僅可以寫在元素便籤中，同樣也可以寫在元素的屬性中：

<div class="is-car {{if isFast "zoooom" "putt-putt-putt"}}">
</div>

嵌套調用

第二種—-嵌套調用，另一種使用助手的方式。如同行內助手，嵌套助手也生成並且返回一個值。比如，在下面的例子中，當且僅當isFast和isFueled都爲true時，模版纔會將”zoooom”渲染到模版上。

<div>
  {{if isFast (if isFueled "zoooom")}}
</div>

塊方式

第三種—塊方式。通過塊方式，可以渲染模版的一部分。塊方式通過在助手名稱的開頭加”#”，在助手的結束名稱加”/”來定義。

比如，下面的模版僅會在person有定義且屬性存在的情況下才渲染模版：

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{/if}}

{{if}}會檢查條件 的真值，並且：flase, undefined, null , ’ ‘, 0 和[ ]會被認爲是假。

如果if中的變量被認爲是假，那麼{{else}}塊就會被執行渲染：

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}

{{else}}的用法與if….else….語句中else的用法一致，不過通常用{{else if}}：

{{#if isAtWork}}
  Ship that code!
{{else if isReading}}
  You can finish War and Peace eventually...
{{/if}}

與{{if}}相對的是{{unless}}，它的判斷方式與{{if}}相反。使用方式也是上面介紹的3種方式。例子，下面模版僅在hasPaid值爲假的時候纔會被渲染：

{{#unless hasPaid}}
  You owe: ${{total}}
{{/unless}}

本節完