Backbone（也包括 Marionette）试图在集合开始时显示新记录，而不重新渲染整个集合答案

【问题标题】：Backbone (Marionette as well) trying to display a new record at the start of a collection, without re - rendering the whole collectionBackbone（也包括 Marionette）试图在集合开始时显示新记录，而不重新渲染整个集合
【发布时间】：2019-08-14 21:28:04
【问题描述】：

我正在尝试在集合的开头呈现一个项目（想象一下，如果您在 facebook 上发布一条新记录）

当我来add(response, {at: 0});到集合中，记录在 0 处正确插入到集合中，但呈现在项目列表的底部。我很困惑，因为我以前做过这个工作，但我认为我在做的是一种 hacky 风格，只是重置并重新渲染集合。

我想知道处理这个问题的整洁方法是什么，我应该在哪里绑定逻辑。

是在集合的add方法上吗？目前这是空的（但我正在使用 Marionette），我觉得这会覆盖骨干的默认渲染。如何重新控制它，这样我就可以正确地将我的新项目添加到列表中，而不会全部销毁并重新创建它。

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

在 Marionette 中，将新项目添加到视图中的集合的默认方法是使用 jQuery 的 append 方法。 CollectionView 类型有一个名为 appendHtml 的方法，用于执行实际的附加操作。（见http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-24）

不过，您可以在特定的集合视图中轻松覆盖此方法，并将新模型附加到需要去的任何地方。

在您的情况下，如果您总是希望将新模型添加到列表顶部，那么更改您的集合视图以执行此操作非常简单：

Backbone.Marionette.CollectionView.extend({
  appendHtml: function(cv, iv){
    cv.$el.prepend(iv.el);
  }
});

请注意，cv 是集合视图实例，iv 是集合中模型的项目视图实例。

如果您需要执行更复杂的操作，例如在现有的 HTML 节点集合中查找确切位置，您也可以在 appendHtml 函数中执行此操作。当然，这比仅仅做前置而不是追加要复杂，但它仍然是可能的。

希望对您有所帮助。

【讨论】：

感谢您的回复，绝对认为这对未来会有用！
@ChrisBarry 还可以查看github.com/derickbailey/backbone.marionette/issues/78 的线程，了解将项目按顺序插入呈现集合的方法。
但是用 prepend 替换 append 会改变渲染时的顺序，不是吗？

【解决方案2】：

这可能是一个非常古老的问题，但无论如何我都会发布我的解决方案...... 它通过覆盖 appendHtml 函数，根据新模型添加到集合中的方式（取消移位/添加），在 itemViewContainer 前添加/附加新模型。

appendHtml: function(collectionView, itemView, index){
            if(index > 0) {
                collectionView.$el.find(this.itemViewContainer).append(itemView.el);
            } else {
                collectionView.$el.find(this.itemViewContainer).prepend(itemView.el);
            }
        },

【讨论】：