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

Adding Child Routes

添加子路由

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:

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

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

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

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

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

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.

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

In js/router.js update the router to change the todos mapping, with an additional empty function parameter so it can accept child routes, and add this first index route:

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

  1. Todos.Router.map(function () {
  2.   this.resource('todos', { path: '/' }, function () {
  3.     // additional child routes will go here later
  4.     // 其他子路由以后在这里添加
  5.   });
  6. });
  8. // ... additional lines truncated for brevity ...
  9. // ... 为保持代码简洁，在此省略了其他代码 ...
  11. Todos.TodosIndexRoute = Ember.Route.extend({
  12.   model: function() {
  13.     return this.modelFor('todos');
  14.   }
  15. });

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 as for the TodosRoute.

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

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

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

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附件资源