緩存的視圖失去其事件

我渲染了一個模型集合，它與一個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

緩存的視圖失去其事件

回答

相關問題