Question

I try to have some inheritance with attributeBindings between two View.

(function(exports) {
Ember.MobileBaseView = Ember.View.extend({
    attributeBindings:['data-role', 'data-theme'],
    'data-theme': 'a'
});
})({});


(function(exports) {
Ember.ToolbarBaseView = Ember.MobileBaseView.extend({
    attributeBindings:this.get('attributeBindings').concat(['data-position']),
    'data-position': function() {

I have try this.get(‘attributeBindings’).concat([‘data-position’]) and Ember.MobileBaseView.get(‘attributeBindings’).concat([‘data-position’]) and Ember.MobileBaseView.attributeBindings.concat([‘data-position’])

Perhaps, I should just do attributeBindings:[‘data-role’, ‘data-theme’, ‘data-position’], but I would rather find a better solution.

Answer 1

Ember.View#attributeBindings is a concatenated property, which means if you overwrite it in a subclass, the values from the superclass are concatenated. So this works, see http://jsfiddle.net/pangratz666/r72dz/:

Ember.MobileBaseView = Ember.View.extend({
    attributeBindings: ['data-role', 'data-theme'],
    'data-theme': 'a'
});


Ember.ToolbarBaseView = Ember.MobileBaseView.extend({
    attributeBindings: ['data-position']
});​