Question

I’m playing around with Ember.Router. After going through the excellent sample canonical-emberjs-routing-example by Kasper Tidemann I think I mostly got it.

However I’m wondering how I would best combine this with Ember.Select.
Use-case: I want to the user to be able to select the module from a drop-down and then route to the right module.

How about reopening Ember.Select and overriding valueDidChange?
Any better way to do that?

Em.Select.reopen({
  valueDidChange: Ember.observer(function() {
    this._super();
    console.log('selection changed');
    App.router.transitionTo(this.get('value'))
  }, 'value')
});

Answer 1

in my comment:

if you re-open Em.Select, you’re gonna apply your changes to all Select
controls in your Ember app. You might want to create a view that
extends Ember.Select and then you override the valueDidChange method

I meant something similar to this

var RoutableSelect = Ember.Select.extend({
    valueDidChange: Ember.observer(function() {
        this._super();
        App.router.transitionTo(this.get('value'))
    }, 'value');
});

This way you don’t override the original functionality of the Ember.Select for the rest of your app. And now you can use RoutableSelect for the particular view you want this functionality to exit.