CODEWITHSUNDEEP
javascriptember.jsember-cli
Alex Podworny
Alex Podworny

Reputation: 1019

Template is not refreshing on object property change (Ember 2)

I'm running into an issue with Ember where when I change a property of an object (in this case filteredHeroes) and then set the computed property to be the updated version, my template does not update. How can I force the template to update with the change to the object when the action is called?

In my template, I have:

{{#each filteredHeroes as |hero index|}}
{{hero._data.AttacksPerSecond}}
{{/each}}

In my controller I have an action:

calculateStats() {
        var heroes = this.get("filteredHeroes");

        var valueOfAttackSpeedPerCP = 5.5;
        var valueOfPowerPerCP = 6;

        var attackSpeed = this.get('cpAttackSpeed') * valueOfAttackSpeedPerCP;
        var power = this.get('cpPower') * valueOfPowerPerCP;

        for (var i = 0; i < heroes.length; i++) {
            //Set Attacks per second for the specific hero
            heroes[i]._data.AttacksPerSecond = (1 / (heroes[i]._data.attributesByLevel[14]['BaseAttackTime'] / ((heroes[i]._data.attributesByLevel[14]['AttackSpeedRating'] + attackSpeed) / 100)));   
        }
        this.set('filteredHeroes', heroes);
    }

Thanks for any help!

Upvotes: 1

Views: 731

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

If you are dealing with Ember.Object then we need to use get and set method so that changes will be reflected in template and will trigger the corresponding computed properties and observers. For array manipulation, you need to use methods available Ember.NativeArray

If you are not sure about the object whether its normal object or Ember.Object, then you can always use Ember.Set so that changes will be observed by template,computed properties and observer.

Upvotes: 1

Related Questions