Transition error when splitting Ember statechart between multiple files

Question

I am trying to work out how best to split up my Ember.js statechart into multiple files.

Using SproutCore we needed to use SC.State.plugin('statename') to associate a state we defined in another file with our main statechart.

I saw no such functionality in Ember, so instead I simply added a new state to my statemanager's states hash. (See also my jsFiddle)

App.statemanager = Ember.StateManager.create({
   stateOne: Ember.State.create(....)
})

// new file:
App.statemanager.states.stateTwo = Ember.State.create(....)

At first this seemed to work -- I was able to transition to the new state I defined. However, I discovered that I was not able to transition out of this state using an action:

App.statemanager.states.stateTwo = Ember.State.create({
   doSomething: (manager) {
      manager.transitionTo("stateOne");
   }
)}

App.statemanager.send("doSomething");   // throws error when trying to transition

The error I get locally is

Uncaught Error: assertion failed: You need to provide an object and key to `get`. 
  Ember.StateManager.Ember.State.extend.findStatesByRoute

The error I get in my jsFiddle is

Uncaught TypeError: Cannot read property 'length' of undefined
  Ember.StateManager.Ember.State.extend.contextFreeTransition
  Ember.StateManager.Ember.State.extend.transitionTo

Does anyone know why this is happening, and what the correct way to break up a statechart is?

Answer 1

Instead of trying to edit or add to an already created State Manager you should build up the individual states and then combine them all when building your state chart.

For example: http://jsfiddle.net/a6wHt/5/

App.Statemanager = Ember.StateManager.extend({
    initialState: 'stateOne',

    stateOne: App.StateOne,
    stateTwo: App.StateTwo,
    stateThree: App.StateThree,
    stateFour: App.StateFour
});

Also, I used extend to build the 'class' and then instantiated at the end with create. I think it is a good idea to get in the habit of doing this, even if you treat your state chart as a singleton. It makes your code easier to test later down the line.