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属性作为搜索属性传递，因此在组件中设置search属性将在控制器中设置q属性（双向绑定）

这也可以与绑定到组件的动作一起使用：

// template
{{search-box searchChanged='updateQuery'}}

// component
this.sendAction('searchChanged', 'someValue')

// controller
actions: {
    updateQuery: function(value) {
        this.set('q', value);
    }
}

希望这会在正确的方向为您提供帮助。