CODEWITHSUNDEEP
javascriptember.js
Seth
Seth

Reputation: 2796

How do I define "class attributes" in emberjs?

Say I'm sub-classing ("extending") Ember.View to create My.Widget. I'd like each My.Widget sub-class to have a 'class attribute' called 'XMLTag' that can be used for de-serializing from an XML document.

My.Widget = Ember.View.extend( { /*...*/ });
My.MySubWidget = My.Widget.extend( { /*...*/ });
My.MySubWidget.XMLTag = 'MySubWidget';

Is this the right way to go about this? Or is there some sort of trick I can use in "extend()" to specify that its a class attribute?

Upvotes: 1

Views: 1185

Answers (2)

Christopher Swasey
Christopher Swasey

Reputation: 10552

The proper way to extend class level variables or methods is reopenClass(), e.g.:

My.SubWidget.reopenClass({
  xmlTag: 'mysubwidget'
});

Simply adding the property to My.SubWidget will not be retained if you further extend the class.

Upvotes: 2

pangratz
pangratz

Reputation: 16163

You can add classes via the classNames property on an Ember.View: This property is an array of strings which are added to the class attribute of a concrete view. Since it is a so called concatenated property, sub-classes do not overwrite the classNames of the superclass, but extend it - so the superclass class names are not overwritten.

I created an example, see http://jsfiddle.net/pangratz666/xMBQ4/:

My.Widget = Ember.View.extend({
    classNames: 'my-widget'.w(),
    didInsertElement: function(){
        var classes = this.$().attr('class');
        console.log(classes);
    }
});
My.MySubWidget = My.Widget.extend({
    classNames: 'my-sub-widget XMLTag'.w()
});

My.MySubWidget.create({
    classNames: 'class1 class2'.w(),
    templateName: 'mySubWidget'
}).append();​

This prints the following when the My.MySubWidget view is added: ember-view my-widget my-sub-widget XMLTag class1 class2.

Upvotes: 0

Related Questions