Ember 组件 classNameBinding 未绑定答案

【问题标题】：Ember Component classNameBinding not bindingEmber 组件 classNameBinding 未绑定
【发布时间】：2016-04-10 00:47:41
【问题描述】：

我有一个组件是一个按钮，需要通过它的父组件/控制器的属性来更改它的类名：

// 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 和子级（组件/我的按钮）中的classNames 被更新（也是我的按钮模板中的测试输出）。
但是 classNameBindings 不会更新，而是 classNames 出现多次（查看实际输出的 DOM 时）。好吧，这不是 100% 正确的，它们确实被添加了，但从未被删除。
因此，如果 className push-20-r 一旦被添加，它将保留在那里（在 DOM 中），但永远不会被删除，即使属性 classNames 不再包含它。

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

我在上
Ember 2.0.1
jQuery 1.11.3

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

旁注： 是的，我希望组件本身是button，而不是 div，因为否则我必须更改所有 css.... 我知道我可以通过将组件保留为 div 并包装该按钮来做到这一点在那里调整它的类名。

【问题讨论】：

标签： ember.js components

【解决方案1】：

您正在使用 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...
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢你的回答，你是绝对正确的！我仍然接受另一个答案，因为它更完整。