Ember 组件 classNameBinding 未绑定

Question

我有一个组件，它是一个按钮，需要通过它的父组件属性更改它的类名 component/controller:

// components/my-button/component.js
import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'button',
    classNameBindings: ['classNames'],
    // some other unrelated stuff following....
});

它的模板：

// components/my-button/template.hbs
{{text}}
// nothing important here exept the test-output of:    
{{classNames}}

然后我将它像这样插入到另一个组件中：

// component/parent-component/template.hbs
{{my-button
    classNames=variableClassNames
    text='foo'
}}


// components/parent-component/component.js
import Ember from 'ember';

export default Ember.Component.extend({

    isSortableDown: Ember.computed('track.sort', 'maxSort', function() {
        return this.get('track.sort')<this.get('maxSort');
    }),

    variableClassNames: Ember.computed('isSortableDown',function() {
        if(this.get('isSortableDown')) {
            return 'btn btn-xs btn-default';
        } else {
            return 'btn btn-xs btn-default push-20-r';
        }
    }),

    // other unrelated stuff...
});

现在我的问题是：
当 isSortableDown 发生变化时，父项中的 variableClassNames 和子项 (component/my-button) 中的 classNames 被更新（也是我的按钮模板中的测试输出）。
但是 classNameBindings 没有更新，而是 classNames 出现了多次（当查看实际输出时 DOM）。嗯，这不是 100% 正确，它们确实被添加了，但从未被删除。
因此，如果 className push-20-r 一旦被添加，它将保留在那里（在 DOM 中），但永远不会被删除，即使属性 classNames 不包含它不再。

最后我的问题是我做错了什么，
或者如果 classNameBindings 不应该 更新（但为什么名称 'bindings' 呢？？），
或者如果这最终是一个错误？

我在
Ember2.0.1
jQuery1.11.3

我发现的唯一可能相关的问题是：
https://github.com/emberjs/ember.js/issues/11980
https://github.com/emberjs/ember.js/issues/11556
但他们没有答案......或者只是与派对有关

旁注： 是的，我希望组件本身是 button，而不是 div，否则我将不得不更改所有 css...我知道我可以通过留下组件 div 并包装那个按钮并在那里调整它的类名。

Answer 1

classNames 是组件中的特殊属性。您可以尝试将名称更改为其他名称，看看是否有帮助？

http://emberjs.com/api/classes/Ember.Component.html#property_classNames

Answer 2

您正在使用 ember 组件 classNames 的特殊属性作为导致问题的绑定变量，您可以采取以下方法

export default Ember.Component.extend({
    tagName: 'button',
    classNameBindings: ['isSortableDown::push-20-r'], // class added when isSortableDown is false 
    classNames: ['btn', 'btn-xs', 'btn-default'], // classes that don't change
    isSortableDown: true
    // some other unrelated stuff following....
});

在模板中

{{my-button
    isSortableDown=isSortableDown
    text='foo'
}}

在您的父组件中

export default Ember.Component.extend({

    isSortableDown: Ember.computed('track.sort', 'maxSort', function() {
        return this.get('track.sort')<this.get('maxSort');
    }),

    // other unrelated stuff...
});

Ember 组件 classNameBinding 未绑定

Ember Component classNameBinding not binding

components

ember.js