Leak ember-views.render-double-modify

Question

I am trying to fix the obsolescence that I recently entered in my code and I need help.

A leak:

You changed ... twice in the same render. This was unreliable in Ember 1.x and will be removed in Ember 2.0 [deprecation id: ember-views.render-double-modify]

What I'm trying to do is display a list of points and then the total number of points. I need to reset the lowest score and not include it in the estimated amount. It works for me. A leak occurs when I try to add a CSS class through the NameBindings class to an evaluation that has been excluded.

I am sure this happens when I do Ember.set during my compute calculateTotal property.

My question is, how else can I keep the overall score updated with CSS, also updated when I change the score in the form?

code information: I have two components; score-line and line-judge . Score-row accepts an array of evaluation objects, goes through each point, calling the judge's evaluation component.

Ember : 2.2.0 Ember Data : 2.2.1 

Update . Here is a working Ember Twiddle demonstrating the problem:

https://ember-twiddle.com/6696d907b604aa750201?numColumns=1

index.js - (manufactured code pulled for this question)

 let scores = new Ember A(); scores.pushObject(Ember.Object.create({ points: 1 })); scores.pushObject(Ember.Object.create({ points: 2 })); scores.pushObject(Ember.Object.create({ points: 3 })); 

index.hbs

 {{score-row scores=scores}} 

rating-row.hbs

 {{#each scores as |score|}} {{judge-score score=score}} {{/each}} {{calculatedTotal}} 

point row.js:

 calculatedTotal: Ember.computed(' [e-mail] ', () => { let totalScore = 0, scores = this.get('scores'); if(Ember.isPresent(scores)) { var i, scoresLength = scores.length, sortedAscending, numLowToDrop = 1; sortedAscending = this.get('sortedScores'); for(i = 0; i < scoresLength; i++) { currentScoreObj = sortedAscending.objectAt(i); // I think this is what is causing the ember-views.render-double-modify Ember.set(currentScoreObj, '_droppedLow', (i < numLowToDrop)); } sortedAscending.forEach((score) => { if( !score.get('_droppedLow') ) { totalScore += +score.get('points'); } }); } return totalScore; }), // had to write my own sort because scores.sortBy('points') was sorting as if // points were a string and not a number ? sortedScores: Ember.computed.sort(' [e-mail] ', (score1, score2) => { if (+score1.get('points') > +score2.get('points')) { return 1; } else if (+score1.get('points') < +score2.get('points')) { return -1; } return 0; }) 

referee-score.hbs

 {{input value=score.points}} 

referee-score.js

 import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings: [ "score._droppedLow:droppedLow" ] }); 

Thanks!

Answer 1

I wonder maybe every time a pushObject is called, it re-runs your computed property?

Try the following:

 let scores = new Ember A([ Ember.Object.create({ points: 1 }), Ember.Object.create({ points: 1 }) ]);