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