How to change parent view classname on child view load? - ember.js

Question

I need to change the parent view classname on child view load the code would be like
var ChildView = Em.View.extend({
willInsertElement : function() {
this.get('parentView').set('classnames',['ChildView']);
},
template : Em.Handlebars.compile(template)
});
Regards
Chandru.

Answer 1

Use classNameBindings and send the event from the child view to update the property.
Consider this example:
{{#view App.AParentView}}
{{view App.AChildView}}
{{/view}}
The app:
App = Ember.Application.create();
App.AParentView = Em.View.extend({
bgColor: 'lightgray',
classNames: ['parent-view'],
classNameBindings: 'bgColor',
updateBg: function(bg) {
this.set('bgColor', bg);
}
});
App.AChildView = Em.View.extend({
classNames: ['child-view', 'blue'],
willInsertElement: function() {
this.get('parentView').send('updateBg', 'green');
}
});
The CSS to see it actually working:
html, body {
margin: 20px;
}
.parent-view {
padding: 4rem;
}
.child-view {
padding: 2rem;
}
.lightgray {
background-color: lightgray;
color: black;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
See the jsbin here.