定义组件 编辑页面


英文原文:http://emberjs.com/guides/components/defining-a-component/

为了定义一个组件,需要先创建一个名字以components/开始的模板。例如:如果需要定义一个新组建{{blog-post}},需要创建components/blog-post模板。

如果在HTML文件中使用<script>标签来定义Handlebars模板,模板定义方法如下:

1
2
3
4
<script type="text/x-handlebars" id="components/blog-post">
  <h1>Blog Post</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</script>

如果使用了编译工具,那么应该创建一个名为templates/components/blog-post.handlebars的Handlebars文件。

如果存在一个模板以components/开始的模板,那么就创建了一个与模板同名的组件。如果给定了上述的模板,那么就可以使用{{blog-post}}这个自定义元素了。

1
2
3
4
<h1>My Blog</h1>
{{#each}}
  {{blog-post}}
{{/each}}

JS Bin

每个组件都由一个元素组成。默认情况下,Ember使用<div>元素来包裹组件模板。阅读Customizing a Component's Element可以学习如何修改Ember默认使用的元素。

定义组件子类

通常情况下,组件只封装一些会被不停的重复使用的Handlebars模板片段。在这些情况下,不需要编写任何Javascript代码,只需要像之前所述,定义好Handlebars模板,就能使用组件了。

如果需要自定义组件的行为,那么需要定义一个Ember.Component的子类。例如,如果需要改变包裹组件的元素的时候,需要响应组件模板操作的时候,或需要通过Javascript手动修改组件元素的时候,就需要一个自定义的子类。

Ember通过子类的命名来确定其对应的组件。例如,如果有一个名为blog-post的组件,那么就应该创建一个名为App.BlogPostComponent的子类。如果组件命名为audio-player-controls,那么子类的命名应该为App.AudioPlayerControlsComponents

换句话说,Ember采用组件名的驼峰形式再加上Component作为后缀的类名,来查找与其对应的类。

组件名 组件类
blog-post App.BlogPostComponent
audio-player-controls App.AudioPlayerControlsComponent