Ember.js:如何在呈现每个子视图后挂钩Ember.CollectionView?

时间:2012-02-13 02:02:56

标签: javascript dom ember.js

This question演示了覆盖Ember.View实例的didInsertElement允许您在视图的元素位于DOM之后执行一些代码。

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

当然,在添加到Ember.CollectionView的子视图类上覆盖didInsertElement将在渲染和插入每个子视图后运行钩子。

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

Ember.CollectionView上的两个面向集合的钩子,arrayDidChangecontentDidChange,在底层内容发生变化后执行,但它们在任何渲染发生之前执行。对添加到数组的每个元素执行arrayDidChangecontentDidChange包装内容绑定。

我希望能够在渲染管道(例如willInsertCollectiondidInsertCollection)之间进行钩子操作,以便在渲染所有子元素之前和之后操作DOM - 基本上,在过滤器之前和之后contentBinding

有什么想法吗?我很难过。

2 个答案:

答案 0 :(得分:3)

如果您想要在呈现视图之前和/或之后执行某些操作,则应分别使用willInsertElement和/或didInsertElement。在这种情况下,由于您希望“在渲染所有子元素之前和之后操作DOM”,您应该在CollectionView上调用它们。

我不太确定“contentBinding周围的过滤器之前和之后”是什么意思,所以如果您不能回答您的问题,如果您能澄清我会很乐意提供帮助。

jsFiddle if needed

答案 1 :(得分:0)

我想在推送新对象后应用滚动动画来滑动列表。该列表使用ArrayController和#each助手进行渲染。简单地在推送对象之后触发视图订阅的控制器上的事件导致动画在实际呈现内容的更改之前执行。以下技术对我来说非常有效。

//excerpt from my loadMore method on the ArrayController

var self = this;
self.content.pushObjects(moreItems);
Ember.run.scheduleOnce('afterRender', this, function()
{
  self.trigger('loadMoreComplete');
});