如何在子視圖加載時更改父視圖類名？

Question

我需要改變子視圖的父視圖類名加載代碼會像

var ChildView = Em.View.extend({ 


     willInsertElement   : function() { 

      this.get('parentView').set('classnames',['ChildView']); 

     }, 
     template    : Em.Handlebars.compile(template) 

     }); 

問候 Chandru。

Answer 1

使用classNameBindings並從子視圖發送事件來更新屬性。

考慮這個例子：

{{#view App.AParentView}} 
    {{view App.AChildView}} 
{{/view}} 

的應用：

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'); 
    } 
}); 

的CSS，看看它實際工作：

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; 
} 

見jsbin here。