Understanding the relationships between models and routes, templates, and controllers

[justinrstout]

I’ve just started learning Ember. I’m getting the hang of it, but there’s one thing I’m pretty unclear about. How exactly do models fit in to the application? The manual says “Each template is backed by a model”, but also “Templates are always connected to controllers, not models”. The manual says this is how to associate a model with a template:

App.SomeRoute = Ember.Route.extend({
    model: function() { ... }
});

It looks to me like this associates the model with the route, but then the manual it says it really associates the model with the associated controller. So how is that different than doing this?

App.SomeRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        controller.set('model', model);
    }
});

[tarasm]

Each template is backed by a model", but also “Templates are always connected to controllers, not models”.

Templates are bound to the controller and the controller proxies the model. This means that templates have direct access to properties of the controller and via the controller to properties of the model. In essence, the controller is the middle man between the template and the model and it allows to decorate the model with additional properties.

So how is that different than doing this?

It’s not, you just need to know that Ember will automatically setup the controller for you. If you want o modify that behaviour, then you can use Ember.Route#setupController hook to customize the default behaviour.

You might find my article about CRUD without Ember Data helpful because it covers this question with many small details.

[justinrstout]

Thanks, that article was super helpful for understanding how everything fits together.

[tarasm]

Glad that it helped. Tweet it if you don’t mind