Question

我有一个名为<doc> <ignore name="ignore1" /> <ignore name="ignore2" /> <interesting name="foo.a" /> <interesting name="foo.b" /> <ignore name="ignoreN" /> <interesting name="bar.a" /> <interesting name="bar.b" /> </doc>的自定义组件，现在每个{{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希望在控制器中捕获它并以这种方式设置属性但是不成功。关于如何使这项工作的任何想法？

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);
    }
}

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

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

1 个答案: