CODEWITHSUNDEEP
javascriptember.js
user1429980
user1429980

Reputation: 7148

EmberJS Observer Not Firing

EmberJSBin here

I have a component which needs to perform a given operation when any of its values are changed, but the observer I created does not fire:

export default Ember.Component.extend({
    taxes: null,
    NOAYears: 2,
    NOAValues: Ember.computed("NOAYears", function() {
        var NOAs = [],
            lastYear = new Date().getFullYear() - 1;
        for (var year = 0; year < this.get("NOAYears"); year++) {
            NOAs.push({year: lastYear - year, value: 0});
        }
        return NOAs;
    }),
    NOAYearsChanged: function() {
        // does not fire when any of the values change
    }.observes("[email protected]")
});

In the component template, I am binding via the {{#each}} iterator:

{{#each NOAValues as |year|}}
    <label for="{{year.year}}-value">{{year.year}}</label>
    {{input min="0" step="any" value=year.value required=true placeholder="Yearly Income"}}
{{/each}}

How can I get my observer to fire when any of the value properties in NOAValues is changed?

Upvotes: 1

Views: 648

Answers (2)

Grapho
Grapho

Reputation: 1654

This issue has been verified as a bug, caused by legacy code, which interprets any property name beginning with a capital letter (i.e. PascalCase) as either a global or a Class name reference... rendering the property unobservable.

Source: https://github.com/emberjs/ember.js/issues/10414

It seems like efforts will be made to fix it in some upcoming releases.

Upvotes: 2

Mike Post
Mike Post

Reputation: 6460

In order to observe property changes, you need to use a setter for a given property. I think you introduce a NOA model that extends Ember.Object it should be sufficient. For example:

// file app/model/noa.js
export default Ember.Object.extend({
  year: undefined,
  value: undefined
});

and then replace this:

for (var year = 0; year < this.get("NOAYears"); year++) {
  NOAs.push({year: lastYear - year, value: 0});
}

with

for (var year = 0; year < this.get("NOAYears"); year++) {
  NOAs.push(app.model.noa.create({year: lastYear - year, value: 0}));
}

You should see some property changes.

Upvotes: 0

Related Questions