缓存的视图失去其事件

我渲染了一个模型集合，它与一个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而不是创建新的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; 
}

所以这部作品在这么多的意见是重新使用 - 但我已经注意到的是，如果我使用一个缓存的视图（如收集已排序和渲染功能找到缓存查看）子项目视图上的所有事件停止工作？这是为什么？

也有人可以提出一个更好的方式来做到这一点？

来源

2012-03-21 Xrender

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

来源

2012-03-21 10:52:07 OlliM

谢谢 - 你知道他们为什么会放松他们的事件吗？ – Xrender 2012-03-21 13:31:57

我会说这是因为他们的元素（RequestItemView.el）从行$（this.el）.empty（）上的dom中删除。重新连接事件正是为了使用delegateEvents方法。 – OlliM 2012-03-21 13:48:15

由于OlliM提到的原因，是因为事件被绑定到DOM元素，但不是重新绑定的元素，你也可以只取下他们，而不是排除这些（分离保持事件绑定http://api.jquery.com/detach/）

像

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

然后就是重新安装元素

$cnt.append(view.el);

我也会考虑使用文档FR同时重建/分类列表，然后附加附加内容。

来源

2012-04-04 18:31:58 Jack

缓存的视图失去其事件

回答

相关问题