Question

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

当我来添加（响应，{at：0}）;在集合中，记录正确地在0处插入到集合中，但是在项目列表的底部呈现。我很困惑，因为我之前有这个工作，但我认为我在hacky风格做的事情，只是重置和重新渲染集合。

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

是否在集合的add方法中？目前这是空的（但我使用的是Marionette），我觉得这会覆盖骨干的默认渲染。如何再次控制它，这样我才能正确地将我的新项目添加到列表中，而不会破坏它并重新创建它。

Answer 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函数中执行此操作。当然，这比仅仅做一个前置而不是附加更复杂，但它仍然是可能的。

希望有所帮助。

Answer 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);
            }
        },

试图在集合开始时显示新记录的Backbone（Marionette），无需重新渲染整个集合

2 个答案: