Ember 设置/保存不更新计算属性

Question

我正在开发一个具有 2 个模型的简单预算应用程序：类别和条目。类别有很多条目。

灰烬 2.2

问题： 类别有计算属性 total 和 difference 来监视相关条目。这些计算属性会在添加和删除条目时更新，但不会在条目属性更改时更新。

这是类别模型：

# app/models/category.js
export default DS.Model.extend({
  name:          DS.attr('string'),
  budgetAmount:  DS.attr('number'),
  budgetSheet:   DS.belongsTo('budget-sheet'),
  entries:       DS.hasMany('entry'),

  total: Ember.computed('entries.@each.amount', {
    get() {
      let entries = this.get('entries');

      return entries.reduce(function(previousValue, entry){
        return previousValue + entry.get('amount');
      }, 0);
    }
  }),

  difference: Ember.computed('budgetAmount', 'total', {
    get() {
      return this.get('budgetAmount') - this.get('total');
    }
  })
});

路线如下：

# app/routes/budget-sheet.js
export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.find('budget-sheet', params.budgetSheetId);
  },

  setupController(controller, model) {
    controller.set('budgetSheet', model);
    controller.set('categories', model.get('categories'));
  }
});

这是具有添加/删除/更新条目操作的控制器：

# app/controllers/budget-sheet.js
export default Ember.Controller.extend({

  entries: Ember.computed('categories.@each.entries', {
    get() {
      let result = [];

      this.get('categories').map(function(category) {
        category.get('entries').forEach(function(entry) {
          return result.push(entry);
        });
      });

      return result;
    }
  }),

  actions: {
    ...

    updateEntry(id, attribute, value) {
      let entry = this.store.peekRecord('entry', id);
      entry.set(attribute, value);
      entry.save();
    },

    deleteEntry(id) {
      let entry = this.store.peekRecord('entry', id);
      entry.destroyRecord();
    }
  }
});

模板遍历categories 并显示计算的属性。该模板还有一个entry-form 组件，负责向控制器中的函数发送数据（addEntry、updateEntry）。

添加或删除条目时，模板会更新。当条目的类别更改时，模板会更新。更新条目的金额时，模板不会更新。

Answer 1

你确实遇到了this open Bug that @jeffreyj linked.

但是你可以通过替换来解决这个问题

total: Ember.computed('entries.@each.amount', {

与

total: Ember.computed('entries.content.@each.amount', {

这是因为entries 将返回一个PromiseArray，而@each 当前已损坏。但是在content 下，你有实际的价值，所以这会起作用。

Answer 2

事实证明，Ember 2.1.1 和 2.2.0 中的计算属性存在一个错误，如本期所述：https://github.com/emberjs/ember.js/issues/12475

Github 问题中的一条评论建议在 hasMany 关系上手动设置 {async: false}，这对我的问题很有用。此更改纠正了我在计算属性未更新时遇到的所有问题：

# app/models/category.js
  - entries: DS.hasMany('entry'),
  + entries: DS.hasMany('entry', {async: false}),

Answer 3

在 Ember 2.2 中，@each 不再存在，尽管使用它时对象的结果不会出现任何错误。@each 始终是一个空数组

如果你只想得到我会亲自使用属性函数

编辑：这是错误的属性模型。@each.property 仍然是答案中的弃用指南的正确链接