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

【问题标题】：Ember.js set controller property form componentEmber.js 设置控制器属性表单组件
【发布时间】：2015-12-16 20:14:11
【问题描述】：

我有一个名为 {{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()，希望在控制器中捕获它并以这种方式设置属性，但没有成功。关于如何完成这项工作的任何想法？

【问题讨论】：

标签： javascript ember.js ember-data ember-cli

【解决方案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);
    }
}

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

【讨论】：