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?
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.