Take the 2-minute tour ×

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?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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

  xmlTag: 'mysubwidget'

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

share|improve this answer

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');
My.MySubWidget = My.Widget.extend({
    classNames: 'my-sub-widget XMLTag'.w()

    classNames: 'class1 class2'.w(),
    templateName: 'mySubWidget'

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

share|improve this answer
When defining classNames, you don't need to add .w() to the end. It accepts a space-separated string as well. –  Bradley Priest May 9 '12 at 8:55
But if you do a console.log(this.get('classNames')) you'll see that the classNames are not split so the output is ["ember-view", "my-widget", "my-sub-widget XMLTag", "class1 class2"]. It doesn't matter because in the end the class attribute of the DOM representation is just a string. But omitting the w() - or not defining it as array - on classNameBindings will not work, see jsfiddle.net/pangratz666/mGFUh. –  pangratz May 9 '12 at 9:22
I think the OP means "class" as in class versus instance, i.e., he wants a class variable. –  Christopher Swasey May 9 '12 at 11:56
@ChristopherSwasey you're probably right. I've read the question too quickly. –  pangratz May 9 '12 at 14:02

Your Answer


