backbone.js 委派事件:从集合中删除模型时未移除子itemViews

kxkpmulp  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(147)

我有一个collectionviewItineraryEditorView,它被换入和换出一个布局区域。collectionView的同一个示例是使用region.show换入的,而不是每次都为collectioView创建新的示例。集合上的render方法调用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);

删除模型是通过监听从itemViewcollectionView的冒泡事件来完成的(可以工作,这里没有问题)

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

我希望这足以确保在从基础days集合中删除模型时删除/关闭集合视图中的子itemViews。我可以看到集合实际上被修改并保存在服务器上,但是集合视图并没有改变。2这种情况当然适用于集合视图第一次被换出之前的情况。在我再次访问另一个选项卡并返回到该选项卡后,视图确实会自动更新(因此呈现了整个集合-确认更改/删除)
解决这个问题的最好方法是什么?如果我重新创建集合视图的示例,它确实会导致代码中其他“on”句柄的丢失。

mgdq6dx1

mgdq6dx11#

不需要手动调用delegateEvents a- 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);

相关问题