Question

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

我有几个不同的解决方案（将刷新按钮移动到组件中，这对用户不太友好，或绑定父组件refresh属性，其中包含应刷新的选项卡的名称和儿童组件观察到的，但没有一个是优雅的。

我也看到了this suggestion，但不知道如何为动态创建的标签页面工作，我无法将标签名称硬编码为父组件属性。

Answer 1

你可以使用可观察的模式（它与这篇文章的内容类似）。

{{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');
  }
});

在父控制器（Array，Object或plain controller）中

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

带有组件的Ember标签

1 个答案: