为了定义一个组件，运行：
ember g component component-name
ember 组件用来将标记文本和样式转换为可重用内容。
组件包含两块：一个用来定义行为的Javascript组件文件，及其附随的Handlebars模板，用于定义组件UI 的标记。
组件的名字必须含有至少一个划线，所以blog-post是符合规范的名字，但post不是。这可以防止与当前或未来的HTML元素名字冲突，将Ember组件与W3C Custome Elements规范对齐，并确保ember自动检测组件。
一个简单的组件可以像这样：
// in app/templates/components/blog-post.hbs
<articles>
<h1>{{title}}</h1>
<p>{{yield}}</p>
<p>编辑标题：{{input type='text' value=title}}</p>
</articles>
基于以上代码，你现在可以使用这个组件：
// in app/templates/index.hbs
{{#each model as |post|}}
{{#blog-post title=post.title}}
{{post-body}}
{{/blog-post}}
{{/each}}
它的模型填充在路由处理程序中的model钩子中：
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.findAll('post');
}
});
每个组件都由引擎盖下的元素支持。默认情况下，Ember会使用<div>元素包含你的组件模板。要了解如何更改Ember用于组件的元素，请参阅Customizing a Component's Element。
定义组件子类
通常，您的组件将包含重用的Handlebar模板。在这些情况下，您根本不需要编写任何JavaScript。 Handlebars允许您定义模板并将其重用为组件。
如果需要自定义组件的行为，则需要定义Component的子类。例如，如果要更改组件的元素，响应组件模板中的操作，或者使用JavaScript手动更改组件的元素，则需要自定义子类。
Ember知道基于组件文件名应该为哪个组价提供动力。例如，如果你的组件名字叫做blog-post，你会在app/components/blog-post.js路径创建一个文件。如果你的组件叫做audio-player-controls，文件名字会在路径app/components/audio-player-controls.js.创建。
动态呈现组件
{{component}}帮助程序可用于将组件的选择推迟到运行时。{{my-component}}句法始终呈现相同的组件，而使用{{component}}帮助程序允许选择要动态呈现的组件。这在你希望根据数据和外部库进行交互的情况下非常有用。使用{{component}}帮助程序将允许你保持不同的逻辑分离。
帮助程序的第一个参数是组件渲染的名字，为字符串。所以{{component 'blog-post'}}和使用{{blog-post}}是一样的。
{{component}}的实际价值来自于能够动态选择正在呈现的组件。
当传递给{{component}}的参数为null或者undefined，帮助程序什么都不显示。当参数改变时，当前呈现的组件被销毁，新的组件被创建并带入。
选择要呈现的不同组件来响应数据，允许你为不同的情况提供不同的模板和行为。{{component}}帮助程序是一种改进代码模块化的强大工具。
网友评论