Ember Documentation understanding - Model linked to Template or not?

Question

I'm learning Ember right now and i'm beeing a bit confused because of the Docu of Ember and the getting started example. In the Documentation it says:

In Ember.js, templates get their properties from controllers, which decorate a model.

And

Templates are always connected to controllers, not models.

But after doing the getting started guide i'm not sure if this is correct.

I've uploaded the finished TodoMVC app here: https://github.com/Yannic92/stackOverflowExamples/tree/master/Ember/TodoMVC

In the Index.html you'll find this template:

<script type="text/x-handlebars" data-template-name="todos/index">
<ul id="todo-list">
    {{#each todo in model itemController="todo"}}
    <li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing" }}>
        {{#if todo.isEditing}}
        {{edit-todo class="edit" value=todo.title focus-out="acceptChanges" insert-newline="acceptChanges"}}
        {{else}}
        {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
        <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
        <button {{action "removeTodo"}} class="destroy"></button>
        {{/if}}
    </li>
    {{/each}}
</ul>
</script>

My question refers to the 3rd Line:

{{#each todo in model itemController="todo"}}

The Controller todo is only needed to provide the actions for the todos. The data is accessable even without this controller. In my opinion there is the model directly connected with the template isn't it?

Or is there a default Controller like the docu mentioned here?

For convenience, Ember.js provides controllers that proxy properties from their models so that you can say {{name}} in your template rather than {{model.name}}.

albertjan albertjan · Accepted Answer · 2015-03-30T12:17:25

As you can see in this line: <script type="text/x-handlebars" data-template-name="todos/index"> this is the template for / because the router has this line: this.route('todos', { path: '/'}). Which will have a controller named TodosController, even if you didn't write one ember will generate one for you. So when you delete it that's what happens.

In this template you loop through the todo's list. Each of these Todo models are decorated with a controller the TodoController. And with this line: {{#each todo in model itemController="todo"}} you tell ember to use this TodoController for every element in the list.

If you leave out the itemController ember assumes the todo's are part of the model for the IndexController provided by the IndexRoute.

By default ember has an empty controller which proxies everything to the underlying model. (Note: I believe this will change in ember 2.0). So it may look like it's directly coupled to the model. But you could write a controller that changes everything without changing the model.

Ember Documentation understanding - Model linked to Template or not?

1 Answers