CODEWITHSUNDEEP
ember.jsjavascript-frameworkhandlebars.js
inertia
inertia

Reputation: 404

Ember computed property doesn't work

I have a view which has a computed property. When the dependency gets updated the observer fires properly, but the computed property does not. What could be the reasons?

In the handlebars:

{{#view viewName currencyBinding="changingValue"}}
    {{view.prefix}}
{{/view}}

In the view:

prefix: (function() {
  //does not get called!!! 
  console.log('computed property fired');
  return this.get('currency');
}).property('currency')

observeCurrency: (function() {
  //gets called!
  return console.log('observer fired');
}).observes('currency')

The observer is fired when the 'changingValue' is updated but the property does not! Also if I set the 'prefix' in the observer:

observeCurrency: (function() {
    //gets called!
    console.log('observer fired');
    return this.set('prefix', this.get('currency'));
}).observes('currency')

My html does not get updated unless I do an explicit rerender of the view. Why is that happening?

Upvotes: 1

Views: 1194

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

It's hard to say what's going on without all your code, but let's see... So perhaps you should remove that wrapping around your computed property as I said in the comment, so your view would have a property that looks somewhat like this:

SomeView: Em.View.extend({
    // other stuff...
    prefix: function() {
        console.log('prefix being called');
        // code that returns something goes here
    }.property('currency'),
    // other stuff...
})

Now to what I believe to be the problem, I've made a fiddle that simulates this scenario in which you indicate which currency you want, and the computed property has a logic to determine what is the prefix. (You can see the source here).

In your code, when you bind changingValue, you're not specifying where this property coming from, you're passing a path that Ember is not able to resolve into a property of an object in your application. In the fiddle that I wrote, note that the property changingValue belongs to my application (which I named SomeApp). Then the path to this property is SomeApp.changingValue, and my binding in handlebars ends up being:

{{view SomeApp.SomeView currencyBinding="SomeApp.changingValue"}}'

Also, note that on that fiddle, I created a child view which binds its content property with the value of currency coming from the parent view. I've only added it there so you can see how the path would be if the property changingValue in your code belongs to a parent view.

I hope this helps.

Upvotes: 4

Related Questions