Question

I am trying to understand whether States in Ember.js are only designed/assumed to be defined in a route manager, and whether routes are integral to Ember. Pretty much all of the guides I’ve seen seem to assume you want states and routes exactly matching.

I want to create states that are not dependent on routes, but just on the state of the application. For example, in an email client, I might have a state “userHasSpecifiedRecipient.” Only if this state is true might I enable the message box of the form. But obviously I don’t want the url to be:

myEmailClient.com#composingMessage_userHasSpecifiedRecipient_userIs... etc.

Are there examples of this?

Second question: Can I mix states that are coupled with routes and states that are not?

Finally: I saw some advice that recommended people use Ember’s sproutcore-statechart addon if they want things like concurrent states. Is this still true?

Answer 1

In EmberJS, there is an implementation of a Finite State Machine, Ember.StateManager. The StateManager uses Ember.State to represent states in the state machine, which have enter and exit functions, etc. Have a look at Class: Ember.StateManager.

For an example that uses the StateManager, the Ember.View uses it to manage the different states of a View. Another example is Ember-Data, which uses a state manager to track the different states a record can have.

In order to make life easier and avoid boilerplate code, there is a Router implementation in the latest version of EmberJS, which is still very much a work-in-progress, with updates once or twice a week. You can find the latest on the GitHub downloads.

Ember.Router is the subclass of Ember.StateManager responsible for providing URL-based application state detection. The Ember.Router instance of an application detects the browser URL at application load time and attempts to match it to a specific application state. Additionally the router will update the URL to reflect an application’s state changes over time. (JSDoc in Ember source)

Additionally, because the Ember.Router extends Ember.StateManager and Ember.Route extends Ember.State, these are interchangeable. In fact, just a day a go more support was made to support the mixture of states and routes, see Support basic States inside of Routes.