Adding Child Routes Edit Page

Next we will split our single template into a set of nested templates so we can transition between different lists of todos in reaction to user interaction.

In index.html move the entire <ul> of todos into a new template named todos/index by adding a new Handlebars template <script> tag inside the <body> of the document:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

Still within index.html place a Handlebars {{outlet}} helper where the <ul> was previously:

1
2
3
4
5
6
7

<!--- ... additional lines truncated for brevity ... -->
<section id="main">
  {{outlet}}

  <input type="checkbox" id="toggle-all">
</section>
<!--- ... additional lines truncated for brevity ... -->

The {{outlet}} Handlebars helper designates an area of a template that will dynamically update as we transition between routes. Our first new child route will fill this area with the list of all todos in the application.

In js/router.js update the router to change the todos mapping so it can accept child routes and add this first index route:

1
2
3
4
5
6
7
8
9
10
11
12
13

Todos.Router.map(function () {
  this.resource('todos', { path: '/' }, function () {
    // additional child routes
  });
});

// ... additional lines truncated for brevity ...

Todos.TodosIndexRoute = Ember.Route.extend({
  model: function () {
    return this.modelFor('todos');
  }
});

When the application loads at the url '/' Ember.js will enter the todos route and render the todos template as before. It will also transition into the todos.index route and fill the {{outlet}} in the todos template with the todos/index template. The model data for this template is the result of the model method of TodosIndexRoute, which indicates that the model for this route is the same model for the TodosRoute.

This mapping is described in more detail in the Naming Conventions Guide.

Live Preview

Ember.js • TodoMVC

Additional Resources