emberjs didInsertElement is triggered when view is in "preRender"
I have some child views that I'm programmatically pushing into a container view during the didInsertElement event of the container view. I then perform some jquery actions on the rendered child view DOM elements during their didInsertElement events. This setup works fine when I refresh the page. But when I transition into the page via a link-to, the didInsertElement events of the child views are triggered when they are in the "preRender" state, and before they've been inserted into the DOM.
Why would the didInsertElement event get triggered during "preRender"? What would cause the difference in behavior of the child views when refreshing page as opposed to transitioning into page via the router?
I don't know why you receive this problem, but sometimes using the afterRender queue solves the problem.
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
}
});
The after render queue is executed when all rendering is finished, so probally your child views will be in the inDOM state instead of preRender .
I hope it helps
While you refresh, the dom gets created and your jquery actions/events works fine and when you transition to a differenct page and come back via the url the jquery events/actions attached to the dom are still there hence they fire before the rendering.
The solution is to clean up the jquery related stuff after the view has been removed from the DOM using willDestroyElement:
App.MyAwesomeComponent = Em.Component.extend({
didInsertElement: function(){
this.$().on('click', '.child .elem', function(){
// do stuff with jQuery
});
},
willDestroyElement: function(){
this.$().off('click');
}
});
for more on this please visit this tutorial
链接地址: http://www.djcxy.com/p/60816.html上一篇: 手动管理Ember中的子视图