添加子路由 编辑页面

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

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

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

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

<!--- ... 为保持代码简洁，在此省略了其他代码 ... -->
<body>
<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>
<!--- ... 为保持代码简洁，在此省略了其他代码 ... -->

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

1
2
3
4
5
6
7

{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<section id="main">
  {{outlet}}

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

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

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

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

Todos.Router.map(function () {
  this.resource('todos', { path: '/' }, function () {
    // 其他子路由以后在这里添加
  });
});

// ... 为保持代码简洁，在此省略了其他代码 ...

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

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

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

在线演示

Ember.js • TodoMVC

附件资源