Ember Actions, Routes and Controllers

I've been working with Ember for about a week now, and I'm really liking it so far. There is a lot to learn, but I've been figuring things out at a steady pace.

One of the things that might not be intuitive at first is the way [Routes] and [Controllers] work. If you're coming from Rails, an Ember Route does a lot more than a Rails Route, and that might take some getting used to. Especially once you start mixing in Actions, which don't really have a place in server-side web development.

Actions are a simple way to turn a JavaScript event (generally a click) into a method you can execute. Both Routes and Controllers can handle an Action, but the more common place to do this in my experience is a Route, which would not have been my first guess. The Ember documentation has this image to clarify how this works.

As you can see, an Action goes to the Controller of the current Route, then to the current Route itself and afterwards it bubbles up through all of its parents. This means if you handle an Action in a Route, you have much more control over where it is handled. This allows you to target exactly the right Route easily.

Controllers in Ember are best seen as a wrapper around the Model that is currently being displayed. It is a good place to store state about the UI or model that does not need to be sent back to the server. But if a click somewhere should affect something out of the scope its own Template, it is easiest to handle this Action in the corresponding Route, and set something on its Controller with:

self.get('controller').set('controllerField', 'value');

In summary:

• Actions: an easy way to turn an event into a function call
• Controllers: a wrapper around your model and a good place to store the state of dynamic UI elements
• Route: the easiest place to handle Actions, by handling them in the right place