返回介绍

对象模型 - 计算属性和带@each的集合数据

发布于 2020-02-21 15:48:02 字数 1805 浏览 1044 评论 0 收藏 0

英文原文:http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/

计算属性时常依赖一个数组中的全部元素来计算其值。例如,要知道有多少已经完成的待办事项,那么需要计算控制器中所有的待办事项才能得出结果。

下面是一个计算属性的示例:

1
2
3
4
5
6
7
8
9
10
App.TodosController = Ember.Controller.extend({
  todos: [
    Ember.Object.create({ isDone: false })
  ],

  remaining: function() {
    var todos = this.get('todos');
    return todos.filterBy('isDone', false).get('length');
  }.property('todos.@each.isDone')
});

这里需要注意的是依赖(todos.@each.isDone)中包含一个特殊的关键字@each。使用了@each意味着Ember.js在下述的四种情况下,将更新计算属性的绑定和触发其观察器:

  1. todos数组中任意一个元素的isDone属性发生改变;
  2. todos数组中添加了一个新成员;
  3. todos数组中有一个成员被移除了;
  4. 控制器的todos数组变为了另外一个不同的数组。

在上面的示例中,remaining1

1
2
3
App.todosController = App.TodosController.create();
App.todosController.get('remaining');
// 1

如果改变待办事项的isDone属性,remaining属性会被自动更新:

1
2
3
4
5
6
7
8
9
10
11
12
var todos = App.todosController.get('todos');
var todo = todos.objectAt(0);
todo.set('isDone', true);

App.todosController.get('remaining');
// 0

todo = Ember.Object.create({ isDone: false });
todos.pushObject(todo);

App.todosController.get('remaining');
// 1

注意@each只工作在第一级。不能嵌套使用,如:todos.@each.owner.name或者todos.@each.owner.@each.name

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文