仅重新渲染 Marionette.js CollectionView 的更改部分答案

【问题标题】：Re-render only changed section of Marionette.js CollectionView仅重新渲染 Marionette.js CollectionView 的更改部分
【发布时间】：2016-03-06 01:49:46
【问题描述】：

下面是我目前拥有的代码，它在每次添加或删除模型时重新呈现一个 collectionView。但是，它似乎效率低下，因为它每次都必须渲染整个事物，而我真正需要的是一个要删除的模型视图或要添加的模型视图。那么我该如何实现呢？

var CollectionView = Marionette.CollectionView.extend({

    childView: ModelView,

    initialize: function() {
        [ "add", "remove" ].forEach(function(eventName) {
            this.listenTo(this.collection, eventName, this.render, this);
        }.bind(this));
    }

});

提前感谢您提供的任何帮助！

【问题讨论】：

你能分享一个minimal reproducible example我们可以一起玩吗..？
@TJ 好的，我已经在 JSFiddle here 上放了一个例子（因为必须有很多行代码才能让它工作，即使我没有包含路由器或任何其他真的是多余的功能）。目前的示例创建了 800 个 ItemView，并通过 CollectionView 将它们显示在页面上。当您单击删除按钮时，模型将从集合中删除，并且视图会自动重新渲染。但是，页面上的项目越多，重新渲染所需的时间就越长，这意味着它正在再次渲染整个事物......
...而不是仅仅从 DOM 中删除单个已删除的 ItemView，这将是最有效的。例如，尝试更改“开始”事件处理程序中的循环，使其仅创建 8 个项目而不是 800 个项目，然后删除一个项目，它的执行速度明显更快。

标签： javascript backbone.js marionette

【解决方案1】：

这已经完成automatically in Marionette:

当一个模型被添加到集合中时，集合视图将将该模型渲染到项目视图的集合中。

当模型从集合中移除（或销毁/删除）时，集合视图将关闭并删除该模型的项目视图。

【讨论】：

你这么说很有趣，因为它似乎不会自动为我工作。我得看看，也许我在某个地方做错了什么。
我可能是错的，但我认为它只会在调用 collectionView 的 render 函数时在页面上更新，我认为它会再次呈现所有 DOM 元素，而不仅仅是那些已更改的元素。
Tholle 是对的-在这里更改了您的示例jsfiddle.net/z5zs3jq0/9 打开它并打开控制台-您将首先看到 800 次渲染，然后每 2000 毫秒为新添加的项目再渲染一次 + 如果您删除您还将看到一个渲染文本添加到控制台
@AviPinto 哦，我明白了，所以我通过监听添加和删除事件来积极减慢它的速度。我真的应该注意到自己，但感谢您编辑我的小提琴，非常有帮助！
我解决了这个问题。显然，我使用的 Backbone 版本不兼容，导致 Marionette 无法正常工作。