Ember JS computed property binding to child of hasMany

Question

I have the following models:

Variant = DS.Model.extend
    value: DS.hasMany('value')

    compiledValues: (->
        @get('values').map((v,i,e) -> 
            v.get('option').get('name') + ' : ' + v.get('value')
        ).join("\n")
    ).property('[email protected]', '[email protected]')

Value = DS.Model.extend
    option: DS.belongsTo('option')

Option = DS.Model.extend
    values: DS.hasMany('values')

The problem I'm having is the the computed property compiledValues is only updated when I modify the value of one of the values, not when the option name changes.

See the jsbin demonstration

I have a workaround which adds a optionName onto the Value like below, but shouldn't I be able to bind as I'm trying above?

optionName: Ember.computed.alias('option.name')

Answer 1

Glad you found the work-around, it's explicitly stated in the docs that nested dependent properties only works one level deep when using @each.

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