ember.js - Ember.js removes and adds the same CSS class for bindAttr

Question

Given

<div {{bindAttr class="test"}}>

When the computed property test is updated but its value stays the same, the test CSS class is removed and added. This creates a problem when the class has CSS animations, as re adding the class restarts the animation. Is there a way to not remove and add the class if it's already part of the element?

Answer 1

每当设置值时，Ember 观察者都会被触发，而不仅仅是在值更改时。您的问题的一个可能解决方案是引入第二个属性，该属性仅在值实际更改时设置。就像是：

<div {{bindAttr class="stableTest"}}>

然后在类似视图中：

onTestChanged: function() {
    var test = this.get('test');
    var stableTest = this.get('stableTest');
    if (test !== stableTest) {
        this.set('stableTest', test);
    }
}.observes('test')