Ember.js 从控制器向所有组件发送操作

Ember.js 从控制器向所有组件发送操作,ember.js,Ember.js,在我的余烬应用程序中,我有一个模型,它是从后端加载的数组。每个项目描述一个小部件。每个小部件类型由Ember组件表示。用户将输入放入每个小部件中,现在需要立即评估所有小部件(按下位于所有组件外部的按钮后) 如何做到这一点?我想我可以使用ember组件入站操作并向每个组件发送一个操作,但是我不知道如何将任意数量的小部件绑定到任意数量的控制器属性(字符串不起作用)。您可以创建ember.Service,它发出事件,将其注入路由或控制器(用户单击按钮时发送操作的位置)和所有组件。然后,您应该在组件中订

在我的余烬应用程序中,我有一个模型,它是从后端加载的数组。每个项目描述一个小部件。每个小部件类型由Ember组件表示。用户将输入放入每个小部件中,现在需要立即评估所有小部件(按下位于所有组件外部的按钮后)


如何做到这一点?我想我可以使用ember组件入站操作并向每个组件发送一个操作,但是我不知道如何将任意数量的小部件绑定到任意数量的控制器属性(字符串不起作用)。

您可以创建
ember.Service
,它发出事件,将其注入路由或控制器(用户单击按钮时发送操作的位置)和所有组件。然后,您应该在组件中订阅从
Ember.Service
发出的事件,或者,如果是共享逻辑,您可以使用特定方法创建
Mixin
,并在所有组件中使用它,并对控制器发出的操作作出反应

示例服务:

export default Ember.Service.extend(Ember.Evented, {  
    emitButtonClicked() {
        this.trigger('buttonClicked');
    }
});
示例组件:

export default Ember.Component.extend({
  theService: Ember.inject.service('theservice'),

  doSomethingWithInput() {
    this.set('randomProperty', true);
    console.log('Do something with input value: ' + this.get('inputVal'));
  },

  subscribeToService: Ember.on('init', function() {
    this.get('theService').on('buttonClicked', this,  this.doSomethingWithInput);
  }),

  unsubscribeToService: Ember.on('willDestroyElement', function () {
    this.get('theService').off('buttonClicked', this, this.doSomethingWithInput);
  })

});
控制器示例:

export default Ember.Controller.extend({
  theService: Ember.inject.service('theservice'),
  actions: {
    buttonClicked() {
        this.get('theService').emitButtonClicked();
    }
  }
});
和示例模板:

<button {{action 'buttonClicked'}}>Global Button</button>

First component:
{{my-component}}

Second component:
{{my-component}}
全局按钮
第一部分:
{{my component}}
第二部分:
{{my component}}

太好了!非常感谢。有没有一种优雅的方法可以从组件收集数据?我知道我可以将动作从组件发送到控制器,但这似乎有点不方便。将动作从组件发送到控制器是一种方法。Ember 2.0鼓励您经常使用动作-“数据下降动作上升”。我发现了奇怪的行为-当我重新创建组件时(例如,通过转换到不同的路由并再次返回),不存在的组件仍在侦听服务(我得到“断言失败:调用已销毁对象上的集合”)。该组件如何正确地“取消订阅”?