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，这是其他开发者将使用你的组件的主要途径。一般来说，保持这些事件越通用越好，这会使组件更加灵活和可重用。