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

Question

I have a custom component called {{search-box}} , now on every keyUp() event I get the input value using this.get('query') now in order to reload my model with this specific search query, I have setup my search controller like this:

import Ember from 'ember';

export default Ember.Controller.extend({

  queryParams: ['q'],
  q: null

});

and my router like this:

import Ember from 'ember';

export default Ember.Route.extend({

  queryParams: {
    q: { refreshModel: true }
  },

  model: function(params){
    // call store here
  }

});

everything works fine except setting the controller.q property from inside the component. I have tried using this.sendAction() from the component hoping to catch it inside the controller and set the property this way but was unsuccessful. Any ideas on how to make this work?

Answer 1

Components are by default isolated. So they don't know anything about controllers or other components from the outside. The only way a component can change values from the outside is by passing this values to the component (for example when defining the component in your template):

// template
{{search-box search=q}}

// component
this.set('search', 'someValue')

Above will set the search property within the component. Because the controller's q property is passed as search property, setting the search property in your component will set the q property in your controller (two-way binded)

This would also work with an action bind to the component:

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

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

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

Hope this will help you in the right directions.