5.2 Components — Defining A Component

一、概述

1. 为了定义一个组件，创建一个模板，它的名字以components/开头。为了定义一个新组件{{blog-post}}，例如，创建一个components/blog-post模板。

2.注意：在组件的名字中至少要有一个破折号。所以blog-post是可以接受的名字，audio-player-controls也是，但是post不是。这样可以防止与当前或者未来的HTML元素名字冲突，并且确保Ember自动检测组件。

3. 一个组件的例子：

app/templates/components/blog-post.hbs

<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>

4. 名字以components/开始的模板创建一个和它同名的组件。假设是上面的模板，你现在可以使用{{blog-post}}自定义元素：

app/templates/index.hbs

{{#each model as |post|}}
  {{#blog-post title=post.title}}
    {{post.body}}
  {{/blog-post}}
{{/each}}

app/templates/components/blog-post.hbs

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>

app/routes/index.js

var posts = [{
    title: "Rails is omakase",
    body: "There are lots of à la carte software environments in this world."
  }, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
}];

export default Ember.Route.extend({
  model() {
    return posts;
  }
});

app/components/blog-post.js

export default Ember.Component.extend({
});

4. 每一个组件，背地里，是被一个元素支持的。默认的Ember将会使用<div>元素去包含你的组件模板。为了学习Ember使用你的模板如何改变元素，请看Customizing a Component's Element

二、Defining a component subclass

1. 多数情况下，你的组件将只是封装特定片段的Handlebars templates，你一遍又一遍的使用。在这种情况下，写任何JS代码。就像上面描述的定义Handlebars template并且使用被创建的组件。

2. 如果你需要自定义组件的行为，你需要定义一个Ember.Component的子类。例如，如果你想改变一个组件的元素你将需要一个自定义的子类，响应来自组件模板的actions，或者使用JS手动更改组件的元素。

3. Ember基于它的文件名知道那个子类驱动组件。例如，如果你有一个名为blog-post的组件，你将创建一个文件app/components/blog-post.js。如果你的组件名为audio-player-controls，文件名将会是app/components/audio-player-controls.js。

三、Dynamically rendering a component

1. {{component}}辅助器可以被用来推迟一个组件的选择到运行时。{{my-component}}句法将总是加载相同的模板，而使用 {{component}}辅助器允许在动态加载时交换组件。在一些情况下这是有用的，你希望和基于数据的不同的外部库交互。使用{{component}}辅助器允许你保留这些不同的逻辑良好分离。

2. 辅助器的第一个参数是要渲染的组件名字，是一个字符串。所以如果你有{{component 'blog-post'}}，这和{{blog-post}}是一样的。

3. {{component}}的真正值来自能够动态挑选被加载的组件。下面是一个使用辅助器的例子，为展现不同类型的posts派遣不同的组件：

app/templates/components/foo-component.hbs

<h3>Hello from foo!</h3>
<p>{{post.body}}</p>

app/templates/components/bar-component.hbs

<h3>Hello from bar!</h3>
<div>{{post.author}}</div>

app/routes/index.js

var posts = [{
    componentName: 'foo-component',  // key used to determine the rendered component
    body: "There are lots of à la carte software environments in this world."
  }, {
    componentName: 'bar-component',
    author: "Drew Crawford"
}];

export default Ember.Route.extend({
  model() {
    return posts;
  }
});

app/templates/index.hbs

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
{{/each}}

4. 为了简便起见，componentName被硬编码进每一个post中，它可以很好地作为一个计算属性，可以减少基于数据的目标组件。

5. 当传递给{{component}}的参数等价于null或者undefined时，辅助器什么都不会加载。当参数变化时，当前加载的组件会被销毁并且新的组件被创建并且引入。

6. 响应数据挑选不同的组件去加载可以让你为每一种情况有不同的模板和行为。该{{component}}助手是一个功能强大的工具，提高代码的模块化。