ember.js - Ember Component classNameBinding not binding -

i have component button needs change it's classnames via property of parent component/controller:

// components/my-button/component.js import ember 'ember';  export default ember.component.extend({     tagname: 'button',     classnamebindings: ['classnames'],     // other unrelated stuff following.... }); 

it's template:

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

and insert in component:

// component/parent-component/template.hbs {{my-button     classnames=variableclassnames     text='foo' }}   // components/parent-component/component.js import ember '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... }); 

now here's problem:
when issortabledown changing, variableclassnames in parent , classnames in child (component/my-button) updated (also test-output in my-button template).
but classnamebindings not updated, instead classnames appear multiple times (when looking @ actual outputted dom). well, that's not 100% right, added, never removed.
if classname push-20-r once gets added, it'll stay there (in dom), never removed, if property classnames doesn't include anymore.

finally question if i'm doing wrong,
or if classnamebindings should not updated (but why name 'bindings' then??),
or if bug?

i'm on
ember 2.0.1
jquery 1.11.3

the maybe relevant issues found are:
https://github.com/emberjs/ember.js/issues/11980
https://github.com/emberjs/ember.js/issues/11556
don't have answer... or party related

sidenote: yes, want component button, not div, because otherwise i'd have change css.... know leaving component div , wrap button , adjust it's classnames there.

you using special property of ember component classnames bound variable causing problem instead can take following approach

export default ember.component.extend({     tagname: 'button',     classnamebindings: ['issortabledown::push-20-r'], // class added when issortabledown false      classnames: ['btn', 'btn-xs', 'btn-default'], // classes don't change     issortabledown: true     // other unrelated stuff following.... }); 

in template

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

in parent component

export default ember.component.extend({      issortabledown: ember.computed('track.sort', 'maxsort', function() {         return this.get('track.sort')<this.get('maxsort');     }),      // other unrelated stuff... });