主干(也是木偶）尝试在集合开始时显示新记录，而不重新渲染整个集合

Backbone (Marionette as well) trying to display a new record at the start of a collection, without re - rendering the whole collection

本文关键字：集合 新记录 显示 新渲染 开始时 主干      更新时间：2023-09-26

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

当我将 add（response， {at： 0}）; 添加到集合中时，记录在 0 处正确插入到集合中，但呈现在项目列表的底部。我很困惑，因为我以前有过这个工作，但我认为我以一种黑客风格所做的只是重置和重新渲染集合。

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

是在集合的添加方法上吗？目前这是空的（但我使用的是木偶），我觉得这覆盖了骨干的默认渲染。如何再次控制它，以便我可以正确地将我的新项目添加到列表中，而无需销毁所有项目并重新创建它。

在木偶中，向视图中的集合添加新项的默认方法是使用 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 函数中执行此操作。当然，这比仅仅做一个前置而不是附加要复杂得多，但它仍然是可能的。

希望有帮助。

这可能是一个非常古老的问题，但无论如何我都会发布我的解决方案......它通过重写 appendHtml 函数，根据新模型添加到集合（unshift/add ）的方式，在 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);
            }
        },
相关文章：