javascript - 这种组件通信方法是 Ember 反模式吗？

Question

获取这个 html 和 JS:

{{#main-view}}
  <!-- page html - header, content, etc. -->

  {{some-action tagName='button'}} Do it

  <!-- more page html -->

{{/main-view}}

// components/main-view.js

Ember.Component.extend({
  mainView: true,
  doSomething: function() { alert('doing something') }
})

// components/some-action.js

Ember.Component.extend({
  mainView: null,

  configureMainView: function() {
    this.set('mainView', this.nearestWithProperty('mainView');
  }.on('didInsertElement'),

  click: function() {
    this.get('mainView').doSomething(); 
  }
})

让后代组件能够与祖先的接口(interface)进行交互的想法。一个用例示例可能是您希望各个页面内容容器能够配置页面上是否提供汉堡菜单，例如 {{page-content show-menu='false'}}.通过这种方式，您可以简单地在顶层定义菜单，并让 children 根据自己的内容需要对其进行配置。

我来自 Angular 世界，但在 Ember 中处理此类事情的更首选方法似乎是绑定(bind)到 Controller 属性或在操作冒泡中的任何适当级别处理路由/ Controller 操作中的操作。我不禁觉得，在很多情况下， Controller 和路由无需担心 UI 配置，因此相关的 UI 组件应该能够简单地相互通信，而无需 Controller 。

我在 ember-cli 插件中实际看到的另一种模式是子组件向特定的父组件查找和注册自己。然后父级将调用子级的接口(interface)，或者以他们认为合适的方式操作它们。与上面的概念基本相同，只是相反。

Answer 1

通信的“ember 方式”是将操作处理程序从父模板添加到组件:

//组件/main-view.js

{{#main-view}}
  <!-- page html - header, content, etc. -->

  {{some-action tagName='button' action="doSomething"}} Do it

  <!-- more page html -->

{{/main-view}}

//组件/some-action.js

Ember.Component.extend({
  click: function() {
    this.sendAction();
  }
});

如果你不想在父进程上处理它，就让它冒泡吧。指南中对此进行了介绍:http://guides.emberjs.com/v1.11.0/components/sending-actions-from-components-to-your-application/