Backbone.js：清除所有视图的最佳方法

Posted 2023-02-26

【中文标题】Backbone.js：清除所有视图的最佳方法

【英文标题】：Backbone.js: Best way to clear a all views

【发布时间】：2011-09-17 11:27:21

【问题描述】：

我正在使用 Backbone.js 呈现具有不同状态的项目（电子邮件收件人）列表，例如。已确认、待定等。呈现列表后，用户可以选择过滤它们，以便用户可以列出所有收件人，或仅列出已确认的收件人等。项目（收件人）自然存储在一个集合中..

我的方法是过滤事件：

清除所有项目的视图 从应用视图调用集合中的 filterOnStatus 函数，该函数返回所有模型并将它们添加到视图中。

第 2 步工作正常。但是清除集合视图中所有项目的最佳方法是什么。

在 Todo 示例应用程序 (http://documentcloud.github.com/backbone/examples/todos/index.html) 中，他们做了类似的事情。在应用程序视图中，以下代码用于从列表中清除所有已完成的项目。

clearCompleted: function() 
  _.each(Todos.done(), function(todo) todo.destroy(); );
  return false;
,

这里的区别在于他们通过删除实际模型来做到这一点。并且该模型的视图会侦听删除视图的销毁事件。

我想保留模型。

解决此问题的最佳方法是什么。我是否需要在模型中存储对其视图的引用，然后遍历模型并删除视图？

如果我想过滤模型中的属性，有没有更好的方法？

【参考方案1】：

如果您的第一步只是简单地清除 所有 项，那么为什么不向您的 AppView 添加一个简单的方法来执行此操作，例如：clearList: function() this.$('.list').html('') 。

或者更好的是，您可以过滤所有模型并将它们呈现给临时元素，而不是用它替换当前列表。因此，所有过滤都将在一次 DOM 调用中完成（DOM 很慢）。 jQuery 示例：

AppView.filterOnStatus = function() 
    var $fragment = $('<div/>')

    // filter your collection and append rendered views to $fragment

    this.$('.list').html( $fragment.html() )

当然还有更复杂的方法，但您是否需要它们取决于您要达到的目标。据我了解，这种简单的方法就足够了。

【讨论】：

但是通过这种方法，我失去了对视图的跟踪（每个列表项都是视图）。没有？

丢失轨道是什么意思？为什么要保留它？

我的意思是视图对象，内存方面。我没有打电话给 view.remove();在上面。但是你说从 DOM 中删除 DOM 表示会自动删除主干视图？

好吧，我根本没想到。据我所知，如果没有对它们的引用，垃圾收集器将删除视图的对象，并且它与 DOM 完全无关。您可以看到，在提到的 todos 示例中，.remove() 只是从 DOM 中删除了视图表示。根据我 3 年的前端开发经验，我认为在这种情况下你根本不应该考虑内存。当然我可能是错的，但我想这值得单独调查。