入门指南 获取Ember 概念 对象模型 应用 模板 路由 组件 控制器 模型 视图 枚举 测式 配置Ember.js COOKBOOK 理解Ember.js

发布于 2015-08-18 16:35:30 | 500 次阅读 | 评论: 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');
    }
  }
});
 

JS Bin

{{action}}助手可以接收参数,监听不同的事件类型,控制操作冒泡等等。

更多关于使用{{action}}助手的内容,请参看模板一章中的操作部分

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务