States in Ember.js without using routes?

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?

score 4 · Accepted Answer · answered Jun 28 '12 at 00:03

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.

score 2 · Answer 2 · answered Jun 25 '12 at 18:47

2

You can change the routers location implementation to 'none' to disable this features. other methods are 'hash' or 'history' (with the current ember-latest.js on github).

https://github.com/joliss/ember.js/blob/50aff86ef5b6847108bc8c32364171815c230d36/packages/ember-application/lib/system/location.js

App.Router = Ember.Router.extend({
    location : Ember.Location.create({
        implementation : 'none'
    })
});

answered Jun 25 '12 at 18:47

Michael Alexander Freund

266
3
8

1

I also just found a fairly recent [example by Yehuda](https://gist.github.com/2679013) that uses Ember.StateManager instead of Ember.Router. The latter is what the documentation uses. What's the difference between them? – Sam Fen Jun 25 '12 at 19:31
Also, as to my second question above, what if I want to have some subset of states that are coupled to routes? In that case I wouldn't want location disabled entirely. (If this mixing is hard, though, it's not so important and I can implement routes some other way.) – Sam Fen Jun 25 '12 at 19:33
Oh, or should I maybe have two different StateManagers, one with locations and one without? – Sam Fen Jun 25 '12 at 19:37
1

The state-manager/route-manager API seems to be very much a moving target in recent weeks. Unless you can produce a working jsfiddle for a given example, assume any examples from Yehuda describe works-in-progress that have most likely been broken by later work. – pjmorse Jun 26 '12 at 14:20
@SamFen This gist is deprecated. Three or four weeks ago, they definitely move the Router feature separated from StateManager.(see the Mixin routable) The Ember.Router IS an Ember.StateManager + Ember.Routable. To answer your question, they use Ember.StateManager in the DS.Model class (see ember-data) – sly7_7 Jun 26 '12 at 14:29

States in Ember.js without using routes?

2 Answers2