#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键 )，浏览器仅仅会在天生支持点击的元素上支持此行为。

本节完