5.6 Components -- Handling User Interaction with Actions

Posted 2020-06-09

1. 组件允许你定义你可以在你的整个应用程序中重用的控件。如果它们够通用，它们也可以在被共享给其他人并且在许多应用程序中被使用。

2. 为了使一个可重用的控件有用，然而，你首先需要你的应用程序的用户和它交互。

3. 你可以通过使用{{action}}辅助器使在你组件中的元素可交互。这和应用程序templates中的{{action}}一样，但是当在模板内部使用时有一个重要的区别。

4. 而不是像模板的控制器发送一个action，然后冒泡到路由层次，来自模板内部的actions被直接发送到模板的Ember.Component实例，并且不会冒泡。

5. 例如，假设下面的组件显示一个post的标题，当这个标题被点击，整个post的内容会被显示：

app/templates/components/post-summary.hbs

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

app/components/post-summary.js

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

{{action}}辅助器可以接收参数，监听不同的事件类型，控制如果发生冒泡，还有更多。