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。

如何在子视图加载时更改父视图类名？

1 个答案: