DelegateEvents：从集合中删除模型时未删除子 itemViews

Question

我有一个collectionview ItineraryEditorView，它被换入和换出布局区域。 collectionView 的同一个实例使用region.show 交换，而不是每次都为collectioView 创建新实例。集合上的渲染方法调用delegateEvents() 方法。

    ItineraryEditorView = Marionette.CollectionView.extend({
    tagName: "div",
    emptyView: EmptyItineraryDayView,
    itemView: ItineraryDayView,
    initialize: function (options) {            
    },  
    render: function() {
        Marionette.CollectionView.prototype.render.apply(this);
        this.delegateEvents();
    },
});

视图被关闭区域换出：

plannerLayout.itineraryEditorRegion.close();

在视图中交换：

itineraryEditorView.delegateEvents();
plannerLayout.itineraryEditorRegion.show(itineraryEditorView);

通过监听从itemView 到collectionView 的冒泡事件来删除模型（有效，这里没有问题）

itineraryEditorView.on("itemview:delete:day", function(childView, model)    {
    days.remove(model); //days coll is passed in to coll view on instance creation
    holiday.save();
});

我希望这足以确保在从基础天数集合中移除模型时移除/关闭集合视图中的子 itemViews。我可以看到集合实际上被修改并保存在服务器上，但是集合视图没有改变。 这种情况当然适用于第一次换出集合视图之前。 科尔。在我重新访问另一个选项卡并返回此选项卡后，视图确实会自行更新（因此呈现整个集合 - 确认更改/删除）

解决此问题的最佳方法是什么？如果我重新创建集合视图的实例，它确实会导致代码中丢失其他“打开”句柄。

Answer 1

无需手动调用delegateEvents - Backbone 在视图的构造函数中执行此操作。当您关闭该区域时，该区域将关闭您的视图，删除所有内部引用并解除绑定所有事件，为垃圾收集做准备。一旦一个视图被close()'d，它不应该被再次使用。解决您的问题的方法应该是 new 将您的 ItineraryEditorView 的另一个实例传递给 show 上的区域。

另外，在调用region.show(view) 之前不必调用region.close()； show 做的第一件事是close() 当前视图，如果有的话。我建议修改您的代码如下：

ItineraryEditorView = Marionette.CollectionView.extend({
    // tagName: "div", // <-- unnecessary as written - default tag

    emptyView: EmptyItineraryDayView,

    itemView: ItineraryDayView

    // this empty override is unnecessary as written - recommend removing it
    // initialize: function (options) {           
    // },

    // this override is unnecessary as written - remove it:
    // render: function() {
    //     Marionette.CollectionView.prototype.render.apply(this);
    //     this.delegateEvents();
    // },
});

...

// plannerLayout.itineraryEditorRegion.close(); <-- delete this line; it's not needed
// itineraryEditorView.delegateEvents();        <-- ditto

由原始帖子编辑

// define a delegate to handle events shared across multiple instances of the view:
function handleDeleteChild(childView, model) {
    days.remove(model); //days coll is passed in to coll view on instance creation
    holiday.save();
});

// create the ItineraryEditorView
// NOTE: As written this will likely conflict with your current code;
//       update as required
var itineraryEditorView = new ItineraryEditorView(options);

// bind event listeners to it
itineraryEditorView.on("itemview:delete:day", handleDeleteChild);

// show it
plannerLayout.itineraryEditorRegion.show(itineraryEditorView);