Question

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

为什么在“preRender”期间会触发didInsertElement事件？刷新页面时，与通过路由器转换到页面相比，会导致子视图行为差异的原因是什么？

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

有关详情，请访问此tutorial

当视图在“preRender”中时触发了emberjs didInsertElement

2 个答案: