Question

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

// 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 不应该更新（但为什么名称'绑定'然后??），
或者如果这最终是一个错误？

我正在上郎 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并将其包装来实现按钮并在那里调整它的classNames。

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 Component classNameBinding不绑定

2 个答案: