Как изменить имя класса родительского представления при загрузке дочернего представления?

#ember.js

#ember.js

Вопрос:

Мне нужно изменить имя класса родительского представления при загрузке дочернего представления, код будет выглядеть так

   var ChildView = Em.View.extend({


       willInsertElement            :   function() {

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

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

      });  
  

С уважением
Чандру.

Ответ №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 здесь.