jquery - backbonejs でのビューの再利用

Question

ビューをレンダリングしたいのですが、それはバインドされたイベントを失うことなく子ビューです。現在、メイン ビューを一度レンダリングしてから、その子ビューを要素に追加しています。親ビューが再びレンダリングされるとel、子ビューがバインドされていたものが消去されます。

私が今持っているものは次のとおりです。

render: function() {     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({el:this.$("#ListView-tab"),collection:this.model.list});
    }
    this.ListView.collection.fetch();
}

これを修正するためのいくつかのアプローチについて読みました：

a) 塗りつぶしレンダリング

このオプションは、最初のレンダリングを入れてから、jqueryを使用しinitializeて関数に情報を追加しますrender

  initialize: function() {
      var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

}

 render: function() {     
    this.$('.title').text(this.model.get('title'));
    this.$('.date').text(this.model.get('date'));

}

b) イベントの切り離しと委任

detach()親ビューをレンダリングするたびに子el、再追加、およびビューdelegateEvents()

render: function() {
    if(typeof(this.ListView)!="undefined"){
        this.ListView.$el.detach
    }     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({collection:this.model.list});
    }
    if(this.ListView.$el.parent().length)this.$("#ListView-tab").append(this.ListView.el); //if not already appended
    this.ListView.collection.fetch();
    this.ListView.delegateEvents();
}

c) 最後のオプションは、ほとんどのコードをそのままにして、単に次のコードをrender親ビューに配置することです

if(typeof(this.ListView)!="undefined"){
    this.ListView=undefined;
}

これにより、子ビューが無効になり、メイン ビューがレンダリングされるたびに再作成されます。

私が投稿した方法に問題はありますか？すべてが再作成され、イベントが機能することを確認する最も簡単な方法であるため、オプション c) に傾いています。