5

我正在尝试消除我最近在我的代码中引入的弃用，我需要一些帮助。

弃用的是：

您在一次渲染中修改了 ... 两次。这在 Ember 1.x 中不可靠，将在 Ember 2.0 中删除 [弃用 id: ember-views.render-double-modify]

我想要做的是显示分数列表，然后显示总分。我需要删除最低分数，而不是将其包含在计算的总分中。我有这个工作。当我尝试通过 classNameBindings 将 CSS 类添加到已排除的分数时，就会出现弃用。

我很确定当我在计算总计的计算属性期间执行 Ember.set 时会发生这种情况。

我的问题是，当我更改表单中的分数时，我还能如何使用 CSS 更新总分？

代码细节：我有两个组件；score-row和Judge-row。score-row 接收一个 score 对象数组，循环遍历每个 score 调用 Judge-score 组件。

Ember      : 2.2.0
Ember Data : 2.2.1

更新这里是一个工作的 Ember Twiddle 演示了这个问题：

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

index.js - （为这个问题提取的模拟代码） 

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

索引.hbs

{{score-row scores=scores}}

得分行.hbs

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

{{calculatedTotal}}

得分-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;
})

裁判分数.hbs

{{input value=score.points}}

法官分数.js 

import Ember from 'ember';

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

谢谢！

4

1 回答 1

0

我想知道是否可能每次pushObject调用它都会重新触发您的计算属性？

尝试这个：

let scores = new Ember A([
  Ember.Object.create({ points: 1 }),
  Ember.Object.create({ points: 1 })
]);
于 2015-12-17T17:36:33.317 回答