2012-03-21 11 views
0

レンダリング時にレンダリングされる独自の 'itemview'がレンダリングされるコレクションビューに関連付けられたモデルのコレクションをレンダリングします。キャッシュされたビューはイベントを失う

コレクションがソートされ、新しいオーダーに基づいてリストビューが再レンダリングされたとき、私は各アイテムの全く新しいビューを作成していました。そのモデルに関連付けられたビューの以前のインスタンスをクリアしていないため、私はゾンビが残っていると信じています。

だから、最初にレンダリングする機能は、第3 /秒など時間と呼ばれた時はいつでも

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(したがってゾンビ)までクリアしていなかった...私はどうしたら私のコレクションをレンダリング

これを解決するために、コレクションビューに単純なキャッシングを追加しようとしました。新しいアイテムビューを作成する代わりに、すでに作成されている場合は代わりに使用します。ビューが再利用されているように私のコード

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; 
} 

は、これはそれほどで動作します - しかし、私が気づいたことは、私は、キャッシュされたビュー(例えばを使用している場合、コレクションがソートされており、レンダリング機能がキャッシュを見つけることですサブアイテムビューのすべてのイベントが機能しなくなるのはなぜですか?何故ですか?

誰もがこれを行う良い方法を提案することができますか?

答えて

3

delegateEvents(http://documentcloud.github.com/backbone/#View-delegateEvents)を使用すると、イベントを再度バインドできます。

+1

ありがとうございます - なぜ彼らは最初の場所でイベントを失うのでしょうか? – Xrender

+1

その要素(RequestItemView.el)が$(this.el).empty()行のdomから削除されているからです。イベントを再接続するのは、delegateEventsメソッドが使用されるものです。 – OlliM

0

OlliMは、イベントがDOM要素にバインドされているので、理由があるが、代わりに要素を再バインドのあなたもちょうどそれらを切り離すの代わりに、それらを削除することができます述べたように(デタッチがhttp://api.jquery.com/detach/イベントバインディングを保持します)のような

何か

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

そしてちょうど

$cnt.append(view.el); 

は、私はまた、文献FRを使用して検討する要素を再接続リストを再構築/ソートして、その代わりに追加することができます。

関連する問題