英文原文：http://emberjs.com/guides/getting-started/adding-child-routes/

接下来我们将模板切分为一系列嵌套的模板，这样我们可以在不同的待办事项列表间转换来响应用户的交互。

在index.html中，添加一个新的Handlebars模板标签<script>到文档的<body>中，并命名为todos/index，然后将整个<ul>移入到其中：

  1. <!--- ... 为保持代码简洁，在此省略了其他代码 ... -->
  2. <body>
  3. <script type="text/x-handlebars" data-template-name="todos/index">
  4.   <ul id="todo-list">
  5.     {{#each todo in model itemController="todo"}}
  6.       <li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
  7.         {{#if todo.isEditing}}
  8.           {{edit-todo class="edit" value=todo.title focus-out="acceptChanges" insert-newline="acceptChanges"}}
  9.         {{else}}
  10.           {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
  11.           <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label><button {{action "removeTodo"}} class="destroy"></button>
  12.         {{/if}}
  13.       </li>
  14.     {{/each}}
  15.   </ul>
  16. </script>
  17. <!--- ... 为保持代码简洁，在此省略了其他代码 ... -->

在<ul>原来所处位置添加一个Handlebars的{{outlet}}助手：

  1. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}
  2. <section id="main">
  3.   {{outlet}}
  5.   <input type="checkbox" id="toggle-all">
  6. </section>
  7. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

{{outlet}}Handlebars助手指定了模板中的一部分，将根据我们在不同的路由间切换而动态更新。我们第一个子路由将在此列出所有的待办事项。

在js/router.js中，使用一个额外的空函数作为参数，来更新路由中todos的映射，使其可以接受子路由，并为其添加index路由：

  1. Todos.Router.map(function () {
  2.   this.resource('todos', { path: '/' }, function () {
  3.     // 其他子路由以后在这里添加
  4.   });
  5. });
  7. // ... 为保持代码简洁，在此省略了其他代码 ...
  9. Todos.TodosIndexRoute = Ember.Route.extend({
  10.   model: function() {
  11.     return this.modelFor('todos');
  12.   }
  13. });

当应用从'/'加载时，Ember.js将进入todos路由并跟之前一样渲染todos模板。这也将转换到todos.index路由，并使用todos/index模板来填充todos模板中的{{outlet}}。模板使用的模型数据是TodosIndexRoute的model方法的返回的值。这表示该路由的模型与TodoRoute的模型相同。

映射关系在命名惯例指南有详细的描述。

在线演示

Ember.js • TodoMVC

附件资源