当视图在"preRender“中时触发preRender

Question

我有一些子视图，是在容器视图的didInsertElement事件期间以编程方式推入容器视图的。然后，在呈现的子视图DOM元素的didInsertElement事件中执行一些jquery操作。当我刷新页面时，此设置工作正常。但是，当我通过链接切换到页面时，子视图的didInsertElement事件在处于"preRender“状态时以及在插入到DOM之前都会被触发。

为什么didInsertElement事件会在"preRender“期间触发？当刷新页面而不是通过路由器转换到页面时，什么会导致子视图行为上的差异？

Answer 1

我不知道您为什么会收到这个问题，但有时使用afterRender队列可以解决这个问题。

App.SomeView = Ember.ContainerView.extend({
  didInsertElement: function() {
    // here your view is in rendered state, but the child views no
    Ember.run.scheduleOnce('afterRender', this, this._childViewsRendered);
  },
  _childViewsRendered: function() {
    // here your child views is in the rendered state
  }
});

当所有呈现完成后呈现队列将被执行，因此您的子视图可能处于inDOM状态而不是preRender状态。

我希望它能帮上忙

Answer 2

当您刷新时，dom会被创建，您的jquery操作/事件可以正常工作，当您转换到一个不同的页面并通过url返回时，附加到dom的jquery事件/操作仍然存在，因此它们在呈现之前会触发。

解决方案是在使用willDestroyElement从DOM中删除视图后清除jquery相关内容：

App.MyAwesomeComponent = Em.Component.extend({
    didInsertElement: function(){
       this.$().on('click', '.child .elem', function(){
       // do stuff with jQuery
      });
},
    willDestroyElement: function(){
this.$().off('click');
}
});

有关此问题的更多信息，请访问此教程