2012-03-16 10 views
1

私はリストビューでバックボーンモデルのコレクションをレンダリングします。各モデルには、のような独自のlistItemViewがあります。バックボーン展開されたビューとゾンビ

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

各ItemsViewは、Clickイベント(サーバーへの呼び出しが行われた場合)で展開できます。

showDetails : function() {  

    var m = new TB_BB.RequestDetails({id : this.model.get('id')}); 
    var outerthis = this; 
    m.fetch({success : function() { 
     var det = new TB_BB.RequestDetailsView({model : m, el : outerthis.el, current : outerthis, template : '#request-expanded-template'});   
     det.render();  

    }});     
} 

したがって、この拡張ビューは現在のアイテムのelに表示されます。私は現在のビュー(外部)への参照を渡していることに気づいたかもしれませんが、これは拡大ビューを閉じるときにこのビューのゾンビを避けるためでした。

拡大ビューでは、非表示のビューを非表示にし、元の要素を表示する非表示のメソッドがあります(現在は非拡張ビューへの参照)。

hideDetails : function() { 
    $(this.el).empty();  
    this.options.current.render(); 
} 

私は、これはこれを行うための最善の方法ではないかなり確信している - 最良の方法はどのようになるかわからないけど?この場合、(元のビューを参照する)ヒドゥンテイルを呼び出すときにはゾンビはありません。しかし、私は 'showDetails'ビューが呼び出され、新しいゾンビが閉じられるたびにそれを推測していますか?誰もがリストのビューを拡大するより良い方法を教えてもらえますか?

答えて

2

私はツリータイプの構造をレンダリングしなければならなかった過去の同様のケースを持ちました。サブリストを表示して再び閉じるためにリストアイテムが開きました。したがって、各リスト項目は、サブビューの空の要素でレンダリングされた

<div class="list-item"> 
    <div class="handle closed" /> 
    <span><%= title %></span> 
    <div class="sub-list" /> 
</div> 

:私は解決策を実装方法は、HTML構造として、このような何かを持っていることでした。次に、クリックハンドラで、このリストアイテムが既にサブリストのビューを作成しているかどうかを確認します(サブリスト要素を表示する場合)。存在しない場合は、ajax-loader.gifをレンダリングし、collection.fetchを呼び出してデータを取得するサブリストビューを作成します。

私は別のdom要素を使用し、遅延ビューを作成し、何かを閉じるときにdom要素を非表示にして、ビューへの参照を保持することをお勧めします。

+0

面白いアプローチ - ありがとうございます – Xrender

関連する問題