发布于 2015-08-18 16:39:24 | 510 次阅读 | 评论: 0 | 来源: 网络整理
接下来我们将模板切分为一系列嵌套的模板，这样我们可以在不同的待办事项列表间转换来响应用户的交互。
在index.html中，添加一个新的Handlebars模板标签<script>到文档的<body>中，并命名为todos/index，然后将整个<ul>移入到其中：
<!--- ... 为保持代码简洁，在此省略了其他代码 ... -->
<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路由：
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的模型相同。
映射关系在命名惯例指南有详细的描述。