Ember.js: How to connect Ember.CollectionView after rendering each child view?

Question

This question shows that overriding an instance of Ember.View didInsertElement allows didInsertElement to execute some code after the view element is in the DOM.

http://jsfiddle.net/gvUux/2/

Naturally, overriding didInsertElement in the child view class that you add to Ember.CollectionView will trigger the hook after rendering and inserting each child view.

http://jsfiddle.net/BFUvK/1/

The two collection-bound hooks on Ember.CollectionView, arrayDidChange and contentDidChange , are executed after the underlying content has been changed, but are executed before the rendering takes place. arrayDidChange is executed for each element added to the array, and contentDidChange completes the content binding.

I would like to be able to hook up a rendering pipeline, for example, willInsertCollection and didInsertCollection , to manipulate the DOM before and after all children are rendered - essentially before and after the filters around the contentBinding .

Any ideas? I'm at a dead end.

Answer 1

If you want to do something before and / or after rendering the view, you should use willInsertElement and / or didInsertElement respectively. In this case, since you want to "manipulate the DOM before and after all children are rendered," you must call them in your CollectionView.

I don’t quite understand what you mean by “before and after filters around contentBinding ”, so if this does not answer your question, if you can clarify, I will be happy to help.

jsFiddle if necessary

Answer 2

I wanted to apply scroll animation to move the list up after clicking new objects. The list was displayed using the ArrayController helper and #each . Simply triggering an event on the controller that the view was subscribed to after clicking objects made the animation execute before changes to the contents were actually displayed. The following technique worked perfectly for me.

 //excerpt from my loadMore method on the ArrayController var self = this; self.content.pushObjects(moreItems); Ember.run.scheduleOnce('afterRender', this, function() { self.trigger('loadMoreComplete'); });