Ember.js 2.3 在 HasMany 关系上实现 @each.property 观察者？答案

【问题标题】：Ember.js 2.3 implement @each.property observer on a HasMany relationship?Ember.js 2.3 在 HasMany 关系上实现 @each.property 观察者？
【发布时间】：2016-06-11 22:03:17
【问题描述】：

假设我有一个 hasMany 关系 Procedure => hasMany Steps，带有 async:true，并且我有一个名为 procedure-main 的过程组件（在过程路由上），它列出了如下步骤：

{{#each steps as |step| }}
 {{step.title}}
{{/each}}

我需要观察每个步骤的属性（例如，stepStatus），以更改任何步骤的 stepStatus。在 Ember 1.7 中，我在过程控制器上有这样的东西：

stepsStatusObserver: function(){
...
}.observes('steps.@each.stepStatus')

这是在任何步骤上的 stepStatus 更改时触发的，并且每当状态更改时，我在此函数中所拥有的任何内容都会被触发。但是，在 Ember 2.3 中，我无法实现这一点。我试过了

stepsStatusObserver: Ember.observer('steps.[].stepStatus', function(){
...
})

但这只会在页面上列出步骤时触发一次。当我将一个步骤的状态更改为新值时，该函数永远不会被触发。

如何在 Ember 2.3 中复制此功能？

注意：在我的用例中，我不能依靠单击按钮手动设置观察者内部的功能，因为如果 stepStatus 属性在任何步骤发生更改，它必须自动触发。

【问题讨论】：

也有可能你的范围是错误的，在你的模板中你使用了procedure.steps，尽管在你的计算属性中你引用了steps。没有更多信息，这只是猜测。
无论如何，steps.[].stepStatus 不是一个有效的语法。
我对错字表示歉意：它的步骤为 |step|在我的 .hbs 上，我在问题中打错了字。它已在编辑中修复。

标签： ember.js ember.js-2

【解决方案1】：

问题在于steps.[].stepStatus 不再是有效的依赖键。您应该将其替换为 steps.@each.stepStatus。

以下是当前 Ember 版本中有效和无效依赖键的摘要：

array - 这会观察数组引用本身是否发生变化，例如用另一个值或数组替换整个数组，例如 oldValue !== newValue。
array.[] - 当数组本身发生变化时（上图）和数组长度发生变化时（功能等同于 array.length），它都会观察到
array.@each.property - 观察上述两种情况
array.@each.{prop,anotherProp} - 您还可以在仅指定一个键的同时观察多个属性。这将扩展为 array.@each.prop 和 array.@each.anotherProp。
array.@each - 不再有效，没有尾随 @each。请改用.[]。
array.@each.property.property - 也无效。请注意，@each 仅适用于一层深度。您不能使用嵌套形式，例如 todos.@each.owner.name 或 todos.@each.owner.@each.name。
array.[].property - 不再有效。请改用@each 表单。

【讨论】：

我喜欢这个答案的华丽细节；不幸的是，即使 step.@each.stepStatus 也不起作用。不过，有趣的是，当路由加载时，对于每一步，观察者都会触发一次。（之前，它只为整个路线触发一次）。然而，当我通过一个动作改变一个步骤的 stepStatus 时，观察者不会触发。这是一个后续问题：它必须是一个简单的 JS 数组，还是 @each.property 的用例应该使用 Ember 为其 hasMany 关系提供的默认“数组代理的子类”？
如果有帮助，我一直在显示用于 chrome 的 ember 调试器工具，并且它确实记录了目标步骤的状态已更改并且它具有dirtyAttributes。即使将观察者切换到 @each.hasDirtyAttributes 也不会在 stepStatus 更改时触发。
可能需要 Ember 数组，具体取决于用例。你能在 ember-twiddle.com 上重现这个问题吗？
不幸的是，我目前正在工作，涉及一个需要我立即关注的问题，但我会尽快更新此评论线程。
我喜欢使用这个 => array.@each.{prop,anotherProp}

【解决方案2】：

你仍然应该使用@each

stepsStatusObserver: Ember.observer('steps.@each.stepStatus', function(){
...
})

【讨论】：