Computed property is not getting updated

I have a test case in which a computed property is not getting updated when I would expect it to do so.

Here is a JSBin:

To reproduce the effect I am seeing change the weight of one of the models by entering a different number, say “30” in the input field and pressing enter. The weight and formattedWeight change as expected.

Now press the “Reset weights” button, which sets the weight of each item in the controller to 50.

The weights in the output are updated correctly, the formattedWeight of the item which was previously set manually is not updated.

I can work around this using an observer and manually setting the formattedWeight property when the weight property changes. I would however expect that the property is updated automatically, being dependent on the weight property.

Is this by design, or a bug?

Thanks in advance!

You try to use computed property setter as well as getter, here working JSBin: JS Bin - Collaborative JavaScript Debugging

For using computed property setter as well as getter you can use like

formattedWeight: function(key, value) {
if(arguments.length>1){    return value;    }         return this.get(‘weight’).toFixed(2);   }.property(‘weight’)

@YIk is right, you need to need to make the formattedWeight property writable because you have it bound to your text field (the Ember.TextField view will call set on that property as the text in the field changes).

formattedWeight: function(key,value) {
    if(arguments.length > 1) { 
      return value;
    return this.get('weight').toFixed(2);

If formattedWeight is just going to be a nicely printed version of weight, maybe you should consider adding .readOnly() to the end of the computed property definition.

formattedWeight: function(key,value) {
    return this.get('weight').toFixed(2);

Thanks guys, that was it.

The property cannot be read-only, as the input field is used for setting the weight property.