Backbone.js - 访问父“集合”视图中的所有子视图答案

【问题标题】：Backbone.js - access all child views inside a parent "collection" viewBackbone.js - 访问父“集合”视图中的所有子视图
【发布时间】：2012-08-01 19:56:10
【问题描述】：

需要在父“集合”视图内的所有子视图上调用.delegateEvents()，以便在从页面中删除父视图然后重新打开后重新委托事件。

我可以看到两种方法，就正确做法而言，这两种方法对我来说都不太正确：

每当在父视图中调用addOne() 时，将刚刚创建的子视图保存到列表中。当视图被添加回页面时需要稍后重新委派事件。使用数组向后滚动该列表并在每个子视图项上调用.delegateEvents()。这种方法的问题是创建一个单独的数组来保存视图中的所有内容，当视图已经有一个 Backbone 认可的方式来通过this.collection.each() 影响它的子视图时
使用视图内的内置View.collection.each() 滚动浏览每个子模型。在每个模型上触发一个事件，导致其相应的视图在其自身上调用.delegateEvents()。这种方法的问题在于，一个纯粹的面向视图的操作正在通过模型进行路由。

这些方法中的任何一种都好还是有更好的方法我应该这样做？

非常感谢！

【问题讨论】：

我们目前正在努力解决同样的问题，并正在调查Marionette 以了解如何解决该问题。 Derick 有一个特殊的CollectionView，据说可以处理这些事情。
@TorstenWalter - 只花了几个小时就读完了 Marionette。你们是决定接受它还是比任何潜在的问题？
由于我们刚刚开始传输一个项目并且无论如何都必须触及所有视图内容，因此从长远来看，实施 Marionette 可能是我们最简单的解决方案。目前我们已经实施了您的第一个解决方案并更新了reset、remove 和destroy 上的视图集合。

标签： javascript backbone.js backbone-events backbone-views backbone-relational

【解决方案1】：

去第一个。无论如何，您都希望保留对 CollectionView 子视图的引用，以便正确删除和重新初始化。后一种模式的问题是，如果模型由多个集合视图表示，所有这些集合视图都将被不必要地触发。

【讨论】：

【解决方案2】：

您可以通过更改删除列表视图的方式来避免整个问题。

如果您调用jQuery.remove() 函数（或Backbone.View.remove() 函数，这是同一件事），它会取消对所有事件的委托以避免内存泄漏。但是，如果您认为稍后要将视图添加回页面，则可以使用jQuery.detach() 从 DOM 中删除元素，而无需取消对所有事件的委托。然后你以后不需要重新委托它们，你只需将元素附加到 DOM 就可以了。我相信它也快一点。

例如，我在一些列表视图中使用了以下函数：

detach : function(){
  this.$el.detach();
},

attach : function(newParentEl){
  this.$el.appendTo(newParentEl);
}

【讨论】：