缓存视图丢失事件答案

【问题标题】：cached view losing its events缓存视图丢失事件
【发布时间】：2012-03-21 08:27:42
【问题描述】：

我渲染了一个模型集合，它与一个 collectionView 相关联，当渲染集合中的每个元素时，它都有自己的“itemview”被渲染。

当对集合进行排序并根据新顺序重新呈现 listView 时，我一直在为每个项目创建一个全新的视图，并且由于我没有清除与该模型关联的任何以前的视图实例，我相信僵尸被遗弃了。

所以最初我会渲染我的收藏...

render : function() {

    $(this.el).empty();
    var content = this.template.tmpl({});
    $(this.el).html(content);
    sortingView.el ='#sorting-container';       
    var els = [];       
    _.each(this.collection.models, function(model){                     
        var view = new TB_BB.RequestItemView({model : model});
        els.push(view.render().el);
    });
    $('#request-list').append(els);
    sortingView.render();

    return this;
}

所以每当第二次/第三次调用渲染函数时，我都没有清除 TB_BB.RequestItemView（因此是僵尸）

为了克服这个问题，我尝试在集合视图中添加一些简单的缓存，这样如果已经创建了新的 itemview，就可以使用它来代替。我的代码

initialize : function(){
    _.bindAll(this,"render");
    this.collection.bind("add", this.render);
    this.collection.bind("remove", this.render);
    this.template = $("#request-list-template");
    this.views = {};
},
events : {
    "change #sort" : "changesort",      
    "click #add-offer" : "addoffer",
    "click #alert-button" : "addalert"
},
render : function() {
    $(this.el).empty();
    outerthis = this;
    var content = this.template.tmpl({});
    $(this.el).html(content);
    sortingView.el ='#sorting-container';       
    var els = [];       
    _.each(this.collection.models, function(model){
        var view;
        if(outerthis.views[model.get('id')]) {
            view = outerthis.views[model.get('id')];
        } else {
            view = new TB_BB.RequestItemView({model : model});
            outerthis.views[model.get('id')] = view;

        }
    });
    $('#request-list').append(els);
    sortingView.render();
    return this;
}

所以这在视图被重复使用的情况下非常有效 - 但是我注意到，如果我使用缓存视图（例如，集合已排序并且渲染函数找到缓存视图），那么所有子项目视图上的事件停止工作？这是为什么呢？

还有人可以提出更好的方法吗？

【问题讨论】：

标签： backbone.js

【解决方案1】：

您可以使用 delegateEvents (http://documentcloud.github.com/backbone/#View-delegateEvents) 再次绑定事件。

【讨论】：

谢谢 - 你知道他们一开始为什么会放弃他们的活动吗？
我会说这是因为他们的元素 (RequestItemView.el) 已从 $(this.el).empty() 行上的 dom 中删除。重新附加事件正是 delegateEvents 方法的用途。

【解决方案2】：

正如 OlliM 提到的，原因是因为事件绑定到 dom 元素，但您也可以分离它们而不是删除它们（分离保留事件绑定 http://api.jquery.com/detach/），而不是重新绑定元素。

类似

 var $sortContainer = $('#sorting-container');
 $('li', $sortContainer).detach();

然后重新附加元素

 $cnt.append(view.el);

我还会考虑在重建/排序列表时使用文档片段，然后附加附加。

【讨论】：