Question

在我的Ember应用程序中，我有一个模型，它是从后端加载的数组。每个项目都描述一个小部件每个窗口小部件类型由Ember组件表示。用户在每个小部件中输入输入，现在需要立即对所有小部件进行评估（按下位于所有组件之外的按钮）。

如何实现？我以为我可以使用ember-component-inbound-actions并向每个组件发送一个动作，但我不知道，如何将任意数量的小部件绑定到任意数量的控制器属性（字符串不起作用）。

Answer 1

你可以创建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}}

将操作发送到控制器

1 个答案: