5

さて、ナビゲーションとダッシュボードの概念ができました。ルーターでナビゲーション リンクをクリックすると、ダッシュボード ビューを呼び出してアクティブなタブを設定します。

例えば：

基準価額

<a href="#" class="dashabord_tab" id="widgets">Widgets</a>
<a href="#" class="dashabord_tab" id="Foobars">Foobars</a>

dashboard_container.jst.tpl

<div id="nav"></div>
<div id="current_tab"></div>

ダッシュボードビュー

DashboardView = Backbone.View.extend({
  template:JST.dashboard_container,
  render: function(){
    $(this.el).html(this.template());
  },
  activateWidgets: function(){ 
    if(!(this.widgets_view)){
      this.widgets_view = new WidgetsView();
      this.widgets_view.render();
    }
    $(this.el).find("#current_tab").html(this.widgets_view.el);
  }, 
  activateFoobars: function(){ 
    if(!(this.foobars_view)){
      this.foobars_view = new FooBarsView();
      this.foobars_view.render();
    }
    $(this.el).find("#current_tab").html(this.foobars_view.el);
  }
});

問題：

したがって、最初に widgets_tab または foobar_tab に切り替えると、タブが期待どおりに読み込まれます。ただし、タブに切り替えてから切り替えてから元に戻すと、ビュー内のすべてのイベントがバインドされなくなります。クリック、ホバーリング、たとえば foobars_view 内のビューはどれもクリック可能、ホバー可能などではありません。

以前は、次のように子ビューごとにラッパーを作成していました。

過去の解決策、ピタ:

activateFoobars: function(){ 
    $('.tab_wrapper').hide();
    if($(this.el).find("#foobars_wrapper").length < 1){
      $(this.el).append("<div class='tab_wrapper' id='foobars_wrapper'></div>");
      this.foobars_view = new FooBarsView();
      $(this.el).find("#foobars_wrapper").html(this.foobars_view.render().el);
    }
  $('#foobars_wrapper').show();
  }

上で示した方法ではなく、常に開いたままの active_tab div にビューの el を配置するというアイデアが本当に気に入っています...私が望む方法でそれを行うことができない場合に、私が上で示した方法に代わるものはありますか? ありがとう！

4

1 に答える 1

5

使用する場合.html(dom_object):

$(this.el).find("#current_tab").html(this.widgets_view.el);

あなたは実際にこれをやっています：

$(this.el).find('#current_tab').empty().append(this.widgets_view.el);

とempty:

要素自体を削除する前に、子要素からデータやイベント ハンドラーなどの他の構成要素を削除します [メモリ リークを回避するため]

したがって、たとえばwidgets_viewto#current_tabと thenを追加すると.html(this.foobars_view.el)、 のイベントwidgets_view.elはなくなります。何もないため、バインドを解除するイベントがない.htmlため、最初の呼び出しは正常に機能します。#current_tab

delegateEventsイベントを再バインドする単純な呼び出しをミックスに追加することで、「ビューを再利用する」アプローチを使用できます。

activateWidgets: function(){ 
  if(!(this.widgets_view)){
    this.widgets_view = new WidgetsView();
    this.widgets_view.render();
  }
  $(this.el).find("#current_tab").html(this.widgets_view.el);
  this.widgets_view.delegateEvents(); // <--------------- you need this
}

私がここにいる間、this.$('#current_tab')の代わりに$(this.el).find('#current_tab')とthis.$elの代わりに使用できます$(this.el)。

デモ: http://jsfiddle.net/ambiguous/75KuW/1/

上記でタブを切り替えると、<input type="text">要素のコンテンツが保持されることに注意してください。そのような動作が必要ない場合は、すべてのビューを保持してスワップインおよびスワップアウトするのではなく、必要に応じてビューを削除してインスタンス化することをお勧めします。

また、あなたWidgetsView(および友人) が他のバックボーン ビューを内部に持っている場合はdelegateEvents、含まれているビューをずっと下まで呼び出す必要があります。この場合、ビューに対するある種のbind_eventsメソッドが理にかなっています。

this.widgets_view.rebind_events(); // delegateEvents() all the way down this view subtree
于 2012-05-22T19:28:34.487 に答える