带有组件的 Ember 选项卡

Question

我正在尝试编写一个 Ember.Component 来处理 Bootstrap 样式的选项卡。我将它实现为一个可重用的TabHolderComponent，它以一个数组作为参数，并为每个项目输出一个选项卡，然后为每个项目输出一个内容容器（à la Bootstrap）。到目前为止它运行良好，但我还需要能够使用选项卡中的按钮刷新选项卡中的内容。有没有优雅的方式向子组件发送刷新事件/动作？

对此我有几种不同的解决方案（将刷新按钮移动到组件中，这样用户友好性会降低，或者绑定父组件refresh 属性，该属性包含应刷新的选项卡的名称以及子组件观察），但没有一个是优雅的。

我也看到了this suggestion，但不知道如何使它适用于动态创建的选项卡，因为我无法将选项卡名称硬编码为父组件属性。

Answer 1

您可以使用 observable 模式（与本文所说的类似）。

{{my-thing parent=controller}}

App.MyThingComponent = Em.Component.extend({
  setup: function(){
    this.get('parent').register(this); // you should check to see if parent exists, I'm lazy
  }.on('init'),
  sayHello: function(){
    console.log('hello');
  }
});

在父控制器中（数组、对象或普通控制器）

App.FooController = Em.Controller.extend({
  observers: null,
  setup: function(){
    this.observers = [];
  }.on('init'),
  register: function(observer){
    this.observers.pushObject(observer);
  },
  talkToChildren: function(){
    this.observers.forEach(function(child){
      child.sayHello();
    });
  }
});

示例：http://emberjs.jsbin.com/yoyod/1/edit