CODEWITHSUNDEEP
javascriptember.jscoffeescript
neverfox
neverfox

Reputation: 7010

Ember computed property doesn't fire when bound to deeply nested property

This JSBin isolates a problem I ran into in my code. I have a hierarchy of embedded models and a computed property (data) that is supposed to fire whenever a value at the very bottom of the chain changes (symbol). The example displays the property directly as well as the result of the computed property. A button changes the value on click. You'll see that it updates the property but the computed property doesn't fire. Why doesn't [email protected] work to trigger the computation when any instrument.symbol changes?

If the example seems contrived, it's only because I tried to abstract something that is more complex in reality, e.g. there is more than just one object in these arrays and data is necessary because another library expects a simple JS object in a particular format.

Upvotes: 3

Views: 725

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Note that @each only works one level deep. You cannot use nested forms like [email protected] or [email protected][email protected].

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

You'll need to create an alias to bring symbol up one level (Not a coffeescript guy, hopefully you can read through the hacking, the positions alias below is for kicks and giggles, makes no difference).

App.Position = Ember.Object.extend({
  instrumentSymbol: Em.computed.alias('instrument.symbol')
})

App.IndexController = Ember.ArrayController.extend
  selectedAllocation: null
  positions: Em.computed.alias('selectedAllocation.positions'),

  data: (->
    @get("positions").map (position) ->
      symbol: position.get "instrumentSymbol"
  ).property "[email protected]"
  ...

http://jsbin.com/bivoyako/1/edit

Upvotes: 3

Related Questions