#8 Actions

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

你的應用肯定需要一些用戶的交互功能。比如，想象一下我們現在有一個模板用來展示了一個帖子的標題，並且當點擊標題的時候，帖子的內容會被展示出來。

如果你在HTML DOM元素上使用{{action}}助手，當用戶點擊這個元素的時候，那麼一個被你命名的action事件就會被髮送到當前模板對應的組件或者controller中。

app/templates/components/single-post.hbs

<h3><button {{action "toggleBody"}}>{{title}}</button></h3>
{{#if isShowingBody}}
  <p>{{{body}}}</p>
{{/if}}

接下來，在這個組件或者controller中，你只需要在actions中定義這個action 函數來接收這個action就可以了：

app/components/single-post.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    toggleBody() {
      this.toggleProperty('isShowingBody');
    }
  }
});

你將會在Triggering Changes With Actions章節中接觸到更高級的用法，不過在這之前你需要先熟悉本章節的基本知識。

action Parameters

你可以選擇性的給ction處理函數傳遞參數。任何在action名稱後面的值都會被當做參數傳遞給action處理函數

例子，post就是參數:

<p><button {{action "select" post}}>✓</button> {{post.title}}</p>

“select” 處理函數將會接收post模型作爲它的參數：

app/components/single-post.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    select(post) {
      console.log(post.get('title'));
    }
  }
});

指定事件類型

默認的，{{action}}助手會對click事件進行監聽。

不過，你也可以指定你想監聽的事件：

<p>
  <button {{action "select" post on="mouseUp"}}>✓</button>
  {{post.title}}
</p>

在這裏，對於事件名稱，你必須使用駝峯命名法。

輔助鍵

默認的，{{action}}助手會在click事件中忽略輔助鍵。不過你可以通過allowedKeys屬性來指定需要支持的按鍵：

<button {{action "anActionName" allowedKeys="alt"}}>
  click me
</button>

允許瀏覽器默認行爲

默認的，{{action}}助手會阻止默認瀏覽器的默認DOM行爲。不過這個功能也是可以被關閉的。

比如，現在我們有個正常的link，現在我們想要關閉Ember默認阻止瀏覽器行爲的行爲：

<a href="newPage.htm" {{action "logClick" preventDefault=false}}>Go</a>

當沒有配置preventDefault=false時，Ember會觸發action函數，用戶會停留在當前頁。

當配置了preventDefault=false時，Ember會觸發action函數，用戶會被導航到新的頁面。

配置action的第一個參數

如果你在{{action}}助手中設置了value選項，那麼它的值會被當做參數被傳遞到action中。這個功能挺友好，可以把它當做單向綁定來使用：

<label>What's your favorite band?</label>
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange"}} />

我們假設下，現在我們有一個action處理函數，並且它將打印傳入的參數：

actions: {
  bandDidChange(newValue) {
    console.log(newValue);
  }
}

默認的，action處理函數接受的參數來自於事件監聽器，它是被瀏覽器傳入的事件對象，所以bandDidChange()將會打印 Event( )。

通過使用value選項，可以把我們需要的屬性從事件對象中提取出來：

<label>What's your favorite band?</label>
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange" value="target.value"}} />

這時候，newValue參數的值將會變成input中輸入的值。

將action應用在非可點擊的元素上

需要注意的事，actions幾乎可以使用在任何的DOM元素上，但是不是所有的元素都會對click事件做出響應。比如，在一個沒有href屬性的a元素或者div元素上使用action，有些瀏覽器就不會執行相關的函數。
如果，你真的需要在這些元素上定義action, 那麼有個通過CSS的方式來使得他們可以響應click。比如：

[data-ember-action]:not(:disabled) {
  cursor: pointer;
}

請記住，就算有這個解決方案，click事件仍然不能通過點擊鍵盤來觸發( 例如: enter鍵 )，瀏覽器僅僅會在天生支持點擊的元素上支持此行爲。

本節完