0

そのため、バックボーンアプリでゾンビビューの同じ有名な問題が発生しました。私はこれをスーパーヒーローにしようとしました：P

var Router=Backbone.Router.extend({
             routes:{
                  "":"loadDashboard",
                  "home":"loadDashboard",
                  'post-leads':"loadPostLeads"
                },
                initialize:function(){
                window.currentView=null;
                },

            loadPostLeads:function(){
            require(['views/post-leads'],function(leads){
            if(window.currentView!=null)
            {window.currentView.remove();}
            window.currentView=new leads();
            window.currentView.render();
            })

        },

              loadDashboard: function(){
        require(['views/dashboard'],function(dashboard){
            if(window.currentView!=null)
            {window.currentView.remove();}
            window.currentView=new dashboard();
            window.currentView.render();
            })
        }
          });

これは機能しません。シンプルなものが欲しかったので、マリオネットなどは使いたくありませんでした。上記で何が問題になっていますか？それは賢明なアプローチですか？

4

1 に答える 1

3

原則として、あなたがすることはうまくいくはずですが、Backboneがそれらを知らないためにクリーンアップできないことがいくつかあります。

0.9.9まず、最新バージョンのBackbone（またはそれ以降）を使用していることを確認する必要があります。イベントバインディングコードにいくつかの改善が加えられ、View.removeメソッドが必要なすべてのクリーンアップを簡単に実行できるようになりました。

一般的な落とし穴は次のとおりです。

モデルイベントを聞く：

//don't use other.on (Backbone doesn't know how to clean up)
this.model.on('event', this.method);

//use this.listenTo (Backbone cleans up events when View.remove is called)
//requires Backbone 0.9.9
this.listenTo(this.model, 'event', this.method);

ビューの範囲外のDOMイベントをリッスンします：

//if you listen to events for nodes that are outside View.el
$(document).on('event', this.method);

//you have to clean them up. A good way is to override the View.remove method
remove: function() {
  $(document).off('event', this.method);
  Backbone.View.prototype.remove.call(this);
}

直接参照：

//you may hold a direct reference to the view:
this.childView = otherView;

//or one of its methods
this.callback = otherView.render;

//or as a captured function scope variable:
this.on('event', function() {
  otherView.render();
});

閉鎖：

//if you create a closure over your view, or any method of your view, 
//someone else may still hold a reference to your view:
method: function(arg) {
  var self = this;
  return function() {
    self.something(x);
  }
}

次の落とし穴を回避すると、ビューを正しくクリーンアップするのに役立ちます。

コメントに基づいて編集：

ああ、あなたはあなたの質問で完全な問題について言及していませんでした。私が収集したように、あなたのアプローチの問題は、2つのビューを同じ要素にレンダリングしようとしていることです。

var View1 = Backbone.View.extend({el:"#container" });
var View2 = Backbone.View.extend({el:"#container" });

また、を削除するView1と、View2は正しくレンダリングされません。

ビューを指定する代わりに、ビューを要素にelレンダリングする必要があります。ページに要素があり、ビューの要素をコンテナに追加する必要があります。#container

loadPostLeads: function () {
  var self = this;
  require(['views/post-leads'], function (leads) {
    self.renderView(new leads());
  })
},

loadDashboard: function () {
  var self = this;
  require(['views/dashboard'], function (dashboard) {
    self.renderView(new dashboard());
  })
},

renderView: function(view) {
  if(window.currentView) {
    window.currentView.remove();
  }

  //the view itself does not specify el, so you need to append the view into the DOM
  view.render();
  $("#container").html(view.el);

  window.currentView = view;
}
于 2013-03-14T08:07:57.857 に答える