ember.js - EmberJS，如何观察散列的任何对象的变化

Question

我有一个像这样的对象：

// app/services/my-service.js
import Ember from 'ember';

export default Ember.Service.extend({
  counters: Ember.Object.create()
})

myService.counters是一个像这样的哈希：

{
  clocks: 3,
  diamons: 2
}

我想为这个对象添加一个计算属性，这样返回myService.counters.clocks加的总和myService.counters.diamons

// app/services/my-service.js
...
count: Ember.computed('counters.@each', function(){
  return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
})
...

但观察者配置不被接受，我有错误：

Uncaught Error: Assertion Failed: Depending on arrays using a dependent key ending with `@each` is no longer supported. Please refactor from `Ember.computed('counters.@each', function() {});` to `Ember.computed('counters.[]', function() {})`.

但是，如果我提出建议的更改：

// app/services/my-service.js
...
count: Ember.computed('counters.[]', function(){
  return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
})
...

计数属性未更新。

我可以使它工作的唯一方法是这样的：

// app/services/my-service.js
...
count: Ember.computed('counters.clocks', 'counters.diamons', function(){
  return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
})
...

在这种情况下如何使用任何类型的通配符？

Answer 1

@each并且[]用于观察数组元素和数组。

您不能使用通配符，因为它会严重影响性能。有多个属性的简写：

count: Ember.computed('counters.{clocks,diamons}', function() {
    return this.get('counters').reduce((memo, num) => memo + num, 0);
})

我还更新了要使用的计算逻辑Array#reduce，以及一个带有隐式返回的箭头函数。