#1 定义组件

最新推荐文章于 2022-08-08 17:42:06 发布

香格里拉烤鸡腿

最新推荐文章于 2022-08-08 17:42:06 发布

阅读量237

点赞数

分类专栏： Ember 组件文章标签： ember组件 ember教程 component emberjs

Ember 组件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

英文原版：https://guides.emberjs.com/v2.13.0/components/defining-a-component/

定义组件，使用以下命令：

ember generate component my-component-name

组件在命名时，必须至少带一个”-“号。所以blog-post是一个合法的命名，audio-player-controls也是，但是post是不合法的。这会有效的避免与HTML元素的名称冲突。

一个简单的组件模板：

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/templates/index.hbs

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

它使用路由中的model( )钩子返回的model：

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

每个组件，在内部都是通过一个元素来实现的。默认的，Ember使用<div>元素来包裹你的组件模板。想要了解如何修改包裹元素，请查阅Customizing a Component’s Element。

定义组件的子类

通常，组件里封装的是可以重复使用的Handlerbars模板。在这种情况下，你不需要再去写任何的javascript代码。

如果你想自定义组件，那么你需要定义继承Ember.Component类。

Ember会基于文件名来执行组件。比如，如果你有个组件名叫blog-post，那么这个组件对应的js文件的地址为：app/components/blog-post.js

动态渲染组件

{{components}}助手可以帮你动态的去渲染一个组件。{{my-component}}总是固定的渲染my-component组件，但是如果你使用{{component}}助手，那么它可以帮助你自由的选择你要渲染的组件。如果你想基于数据与不同的第三方库交互，那么这个特性非常有用。使用{{component}}助手也可以帮你把不同的逻辑很好的分离。

{{component}}助手的第一个参数就是你要渲染的组件名，{{component ‘blog-post’}}等价于{{blog-post}}。

{{component}}真正的价值在于，可以动态的根据名称来渲染指定的组件。下面的例子通过使用{{component}}助手实现通过不同的post来显示不同的组件。

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

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

app/templates/index.hbs

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