观察 Ember.js 中嵌套数组中 object 属性的变化

Question

We have this data structure

[[{foo:"12", bar:"34"}, {foo:"33", bar:"55"}], [{foo:"45", bar:"67"}]]

How is it possible to make a computed property to observe a change on foo or bar ?

Answer 1

Normally you use .@each.someProperty in a computed property to watch specific object properties in an array but in the case of nested arrays (or nested objects), you can't do .@each.@each.someProperty because .@each only works one level deep.

You need to use intermediary computed properties to raise the inner objects up one (or more) levels and have another computed property watch these in turn. There may be other ways to wire things up, but this is a pretty straightforward way to do it.

Here's a twiddle that demonstrates it. If you open the console you can see the individual computed properties recording a change occurring.

You can also use an alias to pull the inner arrays / objects up a level or two.