Ember.js routing based on Ember.Select changes

Question

I have an app that displays a list of results based on the route (specially, query parameters with an Emberjs plugin). These results come from the server's response and require a find() call on the model. I'm trying to use an Ember.select view's dropdown to build the query parameters to filter the results, but I can't seem to find a way to do this, because:

I'm not sure how to (or if I even can) create events from a controller. Currently, I have a self-created controller (with createWithMixins) that receives the selected binding from the Ember.select view:

App.SlotsFiltersController = Ember.Object.createWithMixins({
  weekday: null,
  kind: null,
  neighborhood: null,

  filtersChanged: function() {
    // I'd like to send an event to my current route here
  }.observes('weekday', 'kind', 'neighborhood')
});

Which properly observes the changes from the Ember.Select, but doesn't have access to the router.

I've also tried subclassing the Ember.Select view, and sending an event on valueDidChange. This does reach the route, however the value has not yet been updated in the controller (I would be filtering with stale data).

Finally, I've tried extending the controller that is instantiated by the route; I had no success with this (observer events didn't seem to fire and I wasn't sure how to debug).

Is there a good way to do this? I feel like I'm just going in the wrong direction and after searching forever I just haven't found anything similar that is still up-to-date (post non-global App.Router).

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-07-21T02:07:00

I'm not sure how to (or if I even can) create events from a controller. Currently, I have a self-created controller (with createWithMixins) ...

OK that is the problem. It is never a good idea to create a controller this way, Instead controllers should be created and managed by ember. When ember creates a controller it will inject properties that the controller needs, like for example the 'target' property which points to the route. Then you can send an event to the route like this:

App.SlotsFiltersController = Ember.Controller.extend({
  weekday: null,
  kind: null,
  neighborhood: null,

  filtersChanged: function() {
    target.send('eventName')
  }.observes('weekday', 'kind', 'neighborhood')
});

App.SlotsFiltersView = Ember.SelectView.extend({})

Now from your template, use the {{render}} helper to render SlotsFiltersView in the context of the SlotsFiltrersController.

{{render slotsFilters}}

Ember.js routing based on Ember.Select changes

1 Answers