入门指南 获取Ember 概念 对象模型 应用 模板 路由 组件 控制器 模型 视图 枚举 测式 配置Ember.js COOKBOOK 理解Ember.js

发布于 2015-08-18 16:31:52 | 286 次阅读 | 评论: 0 | 来源: 网络整理

接下来我们将对应用进行进一步的修改,使得用户可以导航至一个只显示未完成的待办事项列表的URL。

index.html中,将‘活动的’待办事项的<a>标签改为Handlebars的{{link-to}}助手,然后把所有(All)中的<a>标签里的 active class 移除:

 
1
2
3
4
5
6
7
8
9
10
11
{{! ... 为保持代码简洁,在此省略了其他代码 ... }}
<li>
  <a href="all">All</a>
</li>
<li>
  {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
</li>
<li>
  <a href="completed">Completed</a>
</li>
{{! ... 为保持代码简洁,在此省略了其他代码 ... }}
 

js/router.js中修改路由,使其可以识别新的路径,并实现对应的路由:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Todos.Router.map(function() {
  this.resource('todos', { path: '/' }, function() {
    // additional child routes
    this.route('active');
  });
});

// ... 为保持代码简洁,在此省略了其他代码 ... 
Todos.TodosActiveRoute = Ember.Route.extend({
  model: function(){
    return this.store.filter('todo', function(todo) {
      return !todo.get('isCompleted');
    });
  },
  renderTemplate: function(controller) {
    this.render('todos/index', {controller: controller});
  }
});
 

本路由的模型数据是待办事项集合中isCompleted属性为false的子集。当一个待办事项的isCompleted属性发生改变,这个子集就会自动更新来添加或者删除对应的待办事项。

通常情况下,切换至一个新的路由,都会改变渲染到父{{outlet}}中的模板,但是在这里,我们更希望可以重用todos/index模板。通过重写renderTemplete方法,并指定render方法调用时的模板和对应的控制器选项就可以实现。

重载浏览器确保没有发生任何错误,并且上面定义的行为出现。

在线演示

Ember.js • TodoMVC

附加资源

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务