发布于 2015-08-18 16:35:30 | 575 次阅读 | 评论: 0 | 来源: 网络整理
组件可以定义能在整个应用中使用的控件。如果组件非常通用,组件可以在很多应用中共享。
为了使得可重用控件有用,那么首先需要应用的用户可以与其交互。
使用{{action}}助手可以让组件支持交互。这与在应用模板中使用的{{action}}助手是相同的,不过在组件中使用时有一点重要的不同。
组件中的操作将被直接发送到组件的Ember.Component实例,不会冒泡。更不会发送到模板的控制器,也不会在路由中冒泡。
例如,假设下面的组件显示一篇博客的标题。当标题被点击时,完整的博客将被显示:
1 2 3 4 5 6 |
<script type="text/x-handlebars" id="components/post-summary">
<h3 {{action "toggleBody"}}>{{title}}</h3>
{{#if isShowingBody}}
<p>{{{body}}}</p>
{{/if}}
</script>
|
1 2 3 4 5 6 7 |
App.PostSummaryComponent = Ember.Component.extend({
actions: {
toggleBody: function() {
this.toggleProperty('isShowingBody');
}
}
});
|
{{action}}助手可以接收参数,监听不同的事件类型,控制操作冒泡等等。
更多关于使用{{action}}助手的内容,请参看模板一章中的操作部分。