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

希望这会帮助您找到正确的方向。

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

Ember.js set controller property form component

javascript

ember.js

ember-data

ember-cli

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

Ember.js set controller property form component

javascript

ember.js

ember-data

ember-cli

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