How to define concurrent states in Ember.js?

Question

I want to define concurrent states in Ember.js, but the lack of documentation makes it hard to figure out how.

You can define mutually exclusive states (system is either in foo or bar) like so:

App.stateManager = Ember.StateManager.create({
    foo: Ember.State.create({
        //...
    }),
    bar: Ember.State.create({
        //...
    })  
});

---

EDIT: Response to ud3323

Isn't the following concurrent states?

App.stateManager = Ember.StateManager.create({
    foo_baz: Ember.State.create({
        foo: Ember.State.create({
           // ...
        }),
        baz: Ember.State.create({
           // ...
        })
    }),
    bar: Ember.State.create({
        //...
    })  
});

But how do you define concurrent states such that, for example, when the system is in foo state, it is also in baz state.

Answer 1

For concurrent states you need to use the statechart add-on. Concurrency is not implemented into enber-states as of yet...

edit

Concurrent states === orthogonal regions (in the world of uml state machine design)

Sorry for not making that clear.

Answer 2

Take a look at this Pull request. It also ties in the routing package as well. https://github.com/emberjs-addons/sproutcore-statechart/pull/16#issuecomment-3747310

DominikGuzei also created a sample application showing how it is used. I found it helpful to understand the current (Always chainging) relationship between emberjs and the addons. https://github.com/DominikGuzei/ember-routing-statechart-example

Answer 3

You can use: Stativus and get full statechart functionality in emberjs right now. It is a complete re-write of the old SC statecharts without any of the SC cruft. (gzipped <3k)

Its more full featured and designed to work with any framework.