Ember.js设置控制器属性表单组件

Question

我有一个名为{{search-box}}的自定义组件，现在在每个keyUp()事件上，我都会使用this.get('query')获得输入值，以便用这个特定的搜索查询重新加载我的模型，我已经像这样设置了我的search控制器：

import Ember from 'ember';
export default Ember.Controller.extend({
  queryParams: ['q'],
  q: null
});

我的路由器是这样的：

import Ember from 'ember';
export default Ember.Route.extend({
  queryParams: {
    q: { refreshModel: true }
  },
  model: function(params){
    // call store here
  }
});

除了从组件内部设置controller.q属性外，其他一切都很好。我曾尝试从组件中使用this.sendAction()，希望在控制器中捕获它并以这种方式设置属性，但没有成功。有什么想法可以让它发挥作用吗？

Answer 1

默认情况下，组件是隔离的。因此，他们从外部对控制器或其他组件一无所知。组件从外部更改值的唯一方法是将这些值传递给组件（例如，在模板中定义组件时）：

// template
{{search-box search=q}}
// component
this.set('search', 'someValue')

上面将设置组件中的搜索属性。因为控制器的q属性作为搜索属性传递，所以在组件中设置搜索属性将在控制器（双向绑定）中设置q属性

这也适用于绑定到组件的操作：

// template
{{search-box searchChanged='updateQuery'}}
// component
this.sendAction('searchChanged', 'someValue')
// controller
actions: {
    updateQuery: function(value) {
        this.set('q', value);
    }
}

希望这将帮助你朝着正确的方向前进。