Ember ember-views.render-double-modify deprecation

Question

Sto cercando di eliminare una deprecazione che ho recentemente introdotto nel mio codice e ho bisogno di aiuto.

La disapprovazione è:

è stato modificato ... due volte in un solo rendering. Questo era inaffidabile in Ember 1.xe verrà rimossa in Ember 2.0 [deprecazione id: brace-views.render-doppio modificare]

Quello che sto cercando di fare è di visualizzare un elenco di punteggi e poi il totale dei punteggi. Devo rilasciare il punteggio più basso e non includerlo nel totale calcolato. Ho questo lavoro. La deprecazione arriva quando provo ad aggiungere una classe CSS tramite classNameBindings al punteggio che è stato escluso.

Sono quasi sicuro che questo accada quando eseguo Ember.set durante la mia proprietà calcolata di calcolatoTotale.

La mia domanda è in quale altro modo è possibile mantenere aggiornato il punteggio totale con il CSS anche quando cambio un punteggio nel modulo?

codice: Ho due componenti; score-row e judge-row. La riga del punteggio contiene una serie di oggetti punteggio, esegue il loop di ogni punteggio chiamando il componente punteggio giudice.

Ember  : 2.2.0 
Ember Data : 2.2.1 

Aggiornamento Ecco un Ember Twiddle lavoro dimostrando il problema:

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

index.js - (codice deriso tirato fuori per questa domanda)

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}} 

Score-row.hbs

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

{{calculatedTotal}} 

Score-row.js:

calculatedTotal: Ember.computed('scores.@each.points',() => { 
    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('scores.@each.points', (score1, score2) => { 
    if (+score1.get('points') > +score2.get('points')) { 
     return 1; 
    } else if (+score1.get('points') < +score2.get('points')) { 
     return -1; 
    } 
    return 0; 
}) 

giudice-score.hbs

{{input value=score.points}} 

giudice-score.js

import Ember from 'ember'; 

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

Grazie!

Answer 1

Mi chiedo se forse ogni volta che si chiami pushObject reimposti la proprietà calcolata?

Prova questo:

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