5.7 Components — Sending Actions From Components to Your Application
一、概述
1. 当一个组件在模板中被使用时，它具有发送action到这个模板的controller和routes的能力。当重大事件发生的时候，这些允许组件通知application，比如点击组件一个特殊的元素。
2. 像{{action}}Handlebars辅助器，来自组件的actions首先会去到模板的controller。如果controller没有为这个action实现一个处理程序，它将会冒泡到模板的route，然后上升到路由层次。要知道更多的关于冒泡行为的信息，请看Action Budding。
3. 组件被设计为在你的应用程序的不同部分可重用的。为了达到这个重用性，这是很重要的，当组件被用在模板中时，被你的组件发送的actions可以被定制。
4.换句话说，如果你在编写一个按钮组件，你不想发送一个click action，因为它是含糊不清的并且可能与页面上的其他组件冲突。相反，当你的按钮被点击时，你会希望允许他人使用组件去指定发送哪一个action。
5.幸运的是，组件有一个sendAction()方法，当一个组件被用在一个模板中时，它允许它们发送指定的actions。
二、Sending a primary action
1. 许多组件仅仅发送一类action。例如，一个按钮组件当被点击时可能发送一个action，这个就是primary action。
2. 为了设置一个组件的primary action，在Handlebars中设置它的action属性：
{{my-button action="showUser"}}
这就告诉my-button组件，当触发它的primary action时它应该发送showUser action。
3. 那么你如何触发发送一个组件primary action的操作呢？在相关的事件发生之后，你可以不含参数的调用sendAction()方法：
app/components/my-button.js
export default Ember.Component.extend({ click() { this.sendAction(); } });
在上面例子中，当这个组件被点击的时候，my-button组件将会发送showUser action。
三、Sending parameters with an action
1. 你可能希望为route或者controller提供额外的上下文来处理一个action。例如，一个按钮组件可能希望告诉一个controller不仅一条数据被删除了，而且还有其他的。
2. 为了使用primary action发送参数，调用sendAction()附加一个'action'字符串作为第一个参数并且其他多余的参数紧随其后：
this.sendAction('action', param1, param2);
例如，假象我们正在创建一个todo list，允许用户删除一个todo：
app/routes/index.js
export default Ember.Route.extend({ model() { return { todos: [{ title: "Learn Ember.js" }, { title: "Walk the dog" }] }; }, actions: { deleteTodo(todo) { var todos = this.modelFor('index').todos; todos.removeObject(todo); } } });
app/templates/index.hbs
{{#each model.todos as |todo|}} <p>{{todo.title}} <button {{action "deleteTodo" todo}}>Delete</button></p> {{/each}}
3. 我们希望更新这个app，所以在真正删除一个todo之间，用户必须确认这就是它们的打算。我们将实现一个组件在完成action之前首先和用户二次检查。
在这个组件中，我们触发primary action，我们将传送一个组件的用户指定的额外参数：
app/components/confirm-button.js
export default Ember.Component.extend({ actions: { showConfirmation() { this.toggleProperty('isShowingConfirmation'); }, confirm() { this.toggleProperty('isShowingConfirmation'); this.sendAction('action', this.get('param')); } } });
app/templates/components/confirm-button.hbs
{{#if isShowingConfirmation}} <button {{action "confirm"}}>Click again to confirm</button> {{else}} <button {{action "showConfirmation"}}>{{title}}</button> {{/if}}
现在我们可以更新我们最初的模板并且用我们的新组建替换{{action}}。
4. 注意，我们已经通过设置组件的action属性来发送指定的action，并且我们已经通过设置组件的param属性指定了哪一个argument应该被作为参数被传送。
四、Sending multipe actions
1. 根据你的组件的复杂性，你可能需要让用户为你的组件生成的不同的事件指定多个不同的actions。例如，假设你正在编写一个form组件，用户可以提交或者取消。根据用户点击哪一个按钮，你希望发送不同的aciton到你的controller或者route。
2. 你可以通过把事件的名字作为第一个参数传递给sendAction()来指定哪一个action被传送。
{{user-form submit="createUser" cancel="cancelUserCreation"}}
在这种情况下，你可以通过this.sendAction('submit')发送createUser action，或者通过调用this.sendAction('cancel')发送cancelUserCreation action。
五、Actions that aren't specified
如果用户使用你的组件没有为一个特殊的事件指定一个action，调用sendAction()将毫无影响。例如，你定义一个组件当点击的时候触发primary action：
app/components/my-button.js
export default Ember.Component.extend({ click() { this.sendAction(); } });
如果用户点击它，使用这个组件不委派一个primary action将会没有任何反应。
{{my-button}}
六、Thinking about component actions
1. 一般情况下，你应该考虑组件的actions作为转换一个primitive event(原始事件)（例如鼠标点击或者一个<audio>元素的暂停事件）为应用程序中有意义的actions。
2. 这允许你的routes和controllers去实现actions处理器，用类似这样的名字deleteTodo或者songDidPause而不是模糊的名字类似clike或者pause，对其他开发者来，当在上下文之外阅读代码，这种名字可能是模糊的。
3. 另一种考虑组件actions的途径是作为你的组件的公共API。考虑组件中的哪一个事件可以在其他应用程序中触发actions，这是其他开发者将使用你的组件的主要途径。一般来说，保持这些事件越通用越好，这会使组件更加灵活和可重用。
