返回介绍

组件 - 使用Action处理用户交互

发布于 2020-02-21 15:48:03 字数 1391 浏览 1171 评论 0 收藏 0

英文原文:http://emberjs.com/guides/components/handling-user-interaction-with-actions/

组件可以定义能在整个应用中使用的控件。如果组件非常通用,组件可以在很多应用中共享。

为了使得可重用控件有用,那么首先需要应用的用户可以与其交互。

使用{{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}}助手的内容,请参看模板一章中的操作部分

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文