events - Ember.js 和 Isotope.js - 在渲染所有子视图后执行 Javascript

Question

我使用 Ember.js (1.0. RC) 并希望将 Isotope.js 的功能应用于我位于“容器”中的一些视图。

所以我的路由基本上从服务器加载包含所需数据的模型，设置控制器的内容并将其绑定到模型的数据，效果很好。

接下来，我为我的 IndexRoute 声明了一个模板，它遍历所有加载的项目，如下所示：

{{each item in this itemViewClass="App.ItemView"}}

这些项目是应该使用 isotope.js 过滤的图像。ItemView 暂时只是指一个简单的模板。

执行链如下：路由 -> 获取模型数据 -> 设置控制器 -> 创建 IndexView -> 将所有 ItemViews 堆积在一个 DIV 容器中。

现在我需要检查是否所有的 ItemViews 都已加载并且渲染是否最终完成以应用 isotope.js 的过滤功能，但我不知道该怎么做。

IndexViewdidInsertElement事件在它被渲染并且在 ItemViews 添加到 DOM 之前立即触发。

如果我不通过模型获取数据而是将其硬编码到变量中，我已经尝试设置一个ContainerView可以与之结合使用的方法。Ember.run.scheduleOnce("afterRender"...)content

这个CollectionView练习也对我不利。

任何想法如何解决这种痛苦？我真的很感激。谢谢。

score 1 · Accepted Answer

我不确定 isotope.js 究竟是如何工作的。考虑到它只是一个 jquery 插件，你可以像这样调用 isotope，即使它是 aContainerView或CollectionView.

didInsertElement: function() {
   Ember.run.next(this, function(){
     this.$().isotope({}) // or watever code u want to write
   });
}

这可以确保 ember.run 中的代码在渲染完成后运行。

1 回答 1