How to add css classes to a child view from handlebar template

Question

I would like to add a css class to a child view from a handlebars template. I am currently getting an error as follows:

Uncaught TypeError: Object [object DOMWindow] has no method 'get'

My code is as follows:

App = Ember.Application.create()

App.ParentView = Ember.View.extend({
    foo: 'bar',
    content: 'Hello',
    ChildView: Ember.View.extend({
        classNames: this.get('parentView').get('classesToAdd')
    })
});

I have a jsfiddle here: http://jsfiddle.net/sohara/PKMTn/2/

Is there something special about the classNames property that shifts the context from the Ember.View to a dom element? Or perhaps there's some other way that I can achieve this?

pangratz · Accepted Answer · 2012-03-15 13:54:06Z

2

You can overwrite the init on the view to access classesToAdd, see http://jsfiddle.net/WCjda/1/

Handlebars:

<script type="text/x-handlebars">
    {{#view App.ParentView}}
       {{#view ChildView classesToAdd="my-class"}}
            hello        
       {{/view}}
    {{/view}}
</script>

JavaScript:

App = Ember.Application.create()

App.ParentView = Ember.View.extend({
    foo: 'bar',
    content: 'Hello',
    ChildView: Ember.View.extend({
        init: function() {
            this._super();
            var classes = this.get('classesToAdd');
            this.set('classNames', Ember.makeArray(classes));
        }
    })
});

answered Mar 15, 2012 at 13:54

pangratz

16.2k7 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sean O'Hara Over a year ago

Thanks. This was basically what I was trying to achieve. I wanted to dry up the handlebars templates. Here's a jsfiddle that is even more dry: jsfiddle.net/sohara/WCjda/3 - No need to declare the childView in the template. One thing to note: I later realized I could achieve the same effect by more creative use of css selectors. (Just declare a class on the parentView and then make a selector along the lines of div.my-class div {#...css attributes }. But this keeps my css cleaner.

Sean O'Hara Over a year ago

One thing to note, setting the classes like this breaks the event handling for the child view because the regular ember-view class is not added to the array of class names, rather the array is replaced. Here's an updated fiddle with a possible solution: jsfiddle.net/sohara/WCjda/4 And here's a further discussion of the issue: github.com/emberjs/ember.js/issues/490

Veebs · Accepted Answer · 2012-03-15 06:46:36Z

0

I don't think you can use this in your classNames declaration of your ChildView because the view object has not been instantiated.

However, you can use bindings. See the documentation at Emberjs.com under the "Customizing the HTML Element" section.

edited Mar 15, 2012 at 6:46

answered Mar 15, 2012 at 6:34

Veebs

2,38813 silver badges10 bronze badges

1 Comment

Sean O'Hara Over a year ago

I had actually tried that first. I had set classNamesBinding and I got another error.

Collectives™ on Stack Overflow

How to add css classes to a child view from handlebar template

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related