Ember has about six concepts that once you understand a bit will help you unlock the documentation and figure out how to develop your site. I have written before about not needing to fully understand ember before working on a project, but once you start getting your feet under you and need to branch out. My hope is that by the time you are done reading, you will have a roadmap to the Ember Guides and the Ember APIs.
Rise of the Tetrad
Ember uses naming conventions to tie together the four moving parts of an ember application; the Route Name, the Route, the Controller, and the Template.
The Route Name
When the route is defined like I did below, it is given a name. By default, the path mapped to the route is the same as the route. For example, the route below defines a route named “level1” and maps the url “/level1” to the route of the same name.
Route.map(function(){ this.route(“level1”); … });
The Route
By default we are generating a route named App.Level1Route. If we want to change the behaviors of the route, which we will cover in more depth in a different post, we need to define our Route and provide it with some overrides. A common override is to provide some model data, like below
App.Level1Route = Ember.Route.extend({ model: function(){ return Ember.$.getJSON(“https://mygame.com/api/level1.json“); } });
The Controller
Again by default, we have a controller called App.Level1Controller created for us. But if we want to override its behavior, we just make a new one with the correct name! For example, we can add an action to save the current state back to the server.
App.Level1Controller = Ember.Controller.extend({ actions: { save: function(){ Ember.$.postJSON(“https://mygame.com/api/pause/“, model); } } });
The Template
We need to show screens for our level. This is done by showing a template. The default template is, of course, named ‘level1’. The template is written in handlebars.
Numbers are tricky. You said there were six, told us about four, but it looks more like only three.
Right. The Route, Controller, and Template are all based off of the Route’s Name. So, four for the price of three. The Other Fourth is the model. I’m just going to skip it for now. The three Ember apps I have written have not yet needed the complexity of an Ember Data model.
The other pieces you will come across are the Components, the views, and Router.
The Router
The router is the part that wires all the components together. We used it to set up our route mapping.
Views
Views let you add behavior to an html tag. You can add behaviors and event handlers to the tag.
Components
Components are an implementation of the W3C Custom Element Spec. They are far more functional than overriding an html tag, they are custom tags backed by a template and code that allow you to build custom controls. If you need a calendar control, start here. Need a tabbed page control? Check out Ember-Components.com for some examples.
Next Steps
Now that we know our way around the major concepts of the Ember framework, we can start to understand them one at a time. Maybe next time we will start with the routes.
This post originally appeared at https://myotherpants.com/2014/07/rise-of-the-tetrad/
