Ember.js router events as functions not working

Question

I have set up some basic routing in my app by using the examples at http://emberjs.com/guides/outlets/#toc_the-router

Within the root I have some events that trigger from view actions e.g:

gotoStepOne: Ember.Route.transitionTo('stepOne'),
gotoStepTwo: Ember.Route.transitionTo('stepTwo'),
gotoStepThree: Ember.Route.transitionTo('stepThree'),
gotoStepFour: Ember.Route.transitionTo('stepFour'),
gotoStepFive: Ember.Route.transitionTo('stepFive'),

Full example router code at http://jsfiddle.net/hellosmithy/WdjXT/

This all works fine at the moment. The problem is that I'd like to add other code into these events. For example:

gotoStepOne: function() {
    if (someCondition) {
        Ember.Route.transitionTo('stepOne');
    }
    someOtherFunction();
}

However doing this breaks the routing without throwing any errors. It just no longer transitions.

Specifically I only want transitions to happen if a certain state is met - something has been selected or input by the user at each stage before they can proceed. Is there a workaround for this, or should I be abstracting this functionality elsewhere?

Answer 1

The way I understand the router is, that it is the representation of the application's state.

Specifically I only want transitions to happen if a certain state is met - something has been selected or input by the user at each stage before they can proceed.

So the user inputting or selecting something puts your application in a certain state which is reflected by the router.

IMHO it should be something like this in a view (or controller):

userDidSomething: function(condition) {
  if (condition) {
    App.get('router').send('stepOne');
  }else{
    someOtherFunction();
  }
}