Displaying Model Data

Next we'll update our application to display dynamic todos, replacing our hard coded section in the todos template.

Inside the file js/router.js implement a TodosRoute class with a model function that returns all the existing todos:

// ... additional lines truncated for brevity ...
Todos.TodosRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('todo');
  }
});

Because we hadn't implemented this class before, Ember.js provided a Route for us with the default behavior of rendering a matching template named todos using its naming conventions for object creation.

Now that we need custom behavior (returning a specific set of models/), we implement the class and add the desired behavior.

Update index.html to replace the static <li> elements with a Handlebars {{each}} helper and a dynamic {{title}} for each item.

{{! ... additional lines truncated for brevity ... }}
<ul id="todo-list">
  {{#each todo in model}}
    <li>
      <input type="checkbox" class="toggle">
      <label>{{todo.title}}</label><button class="destroy"></button>
    </li>
  {{/each}}
</ul>
{{! ... additional lines truncated for brevity ... }}

Ember.js has created a controller for us and set the controller's model property to our route's model. The template loops over the controller's model property. Because we don't need custom behavior for this controller yet, we can use the default object provided by the framework.

Reload your web browser to ensure that all files have been referenced correctly and no errors occur.

Live Preview

Additional Resources