Backbone.js 在backbonejs中处理僵尸视图的方法失败_Backbone.js_Backbone Views

Backbone.js 在backbonejs中处理僵尸视图的方法失败

backbone.js

Backbone.js 在backbonejs中处理僵尸视图的方法失败,backbone.js,backbone-views,Backbone.js,Backbone Views,所以我在我的主干应用程序中遇到了同样著名的僵尸视图问题。我试着成为超级英雄：P var Router=Backbone.Router.extend({ routes:{ "":"loadDashboard", "home":"loadDashboard", 'post-leads':"loadPostLeads" },

所以我在我的主干应用程序中遇到了同样著名的僵尸视图问题。我试着成为超级英雄：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();
            })
        }
          });

这不管用。我想要一些简单的东西，不想用木偶或任何类似的东西。上面出了什么问题？这是一种明智的方法吗？

原则上，你所做的应该是可行的，但有些事情主干网无法清理，因为它不知道

首先，您应该确保您使用的是最新版本的主干（

0.9.9

或更新版本）。对事件绑定代码进行了一些改进，这使得

视图更容易。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);

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

侦听视图范围之外的DOM事件：

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

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

直接引用：

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

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

闭包：

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

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

避免以下陷阱应有助于正确清理视图

根据评论进行编辑：

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

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

啊，你的问题中没有提到全部问题。据我推测，您的方法存在的问题是，您试图将两个视图渲染到同一个元素中：

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

原则上，你所做的应该是可行的，但有些事情主干网无法清理，因为它不知道
首先，您应该确保您使用的是最新版本的主干（
0.9.9
或更新版本）。对事件绑定代码进行了一些改进，这使得
视图更容易。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);

//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); } }
侦听视图范围之外的DOM事件：

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

//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); } }
直接引用：

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

//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); } }
闭包：

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

//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); } }
避免以下陷阱应有助于正确清理视图
根据评论进行编辑：

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

//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); } }
啊，你的问题中没有提到全部问题。据我推测，您的方法存在的问题是，您试图将两个视图渲染到同一个元素中：

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

我LOLed@superhero:D:）有关于这个方法的词吗？我LOLed@superhero:D:）有关于这个方法的词吗？看，当我执行代码时，它会删除它。但是当我创建一个新的视图并执行console.log（window.currentView）时，它会将el显示为未定义：（@beNerd，编辑了我的答案。你真的应该尝试在原始问题中提供所有信息。你可能希望
返回Backbone.view.prototype.remove.call（这个）
在您的
中删除
以匹配默认行为。请参阅，当我执行代码时，它会删除它。但当我创建新视图并执行console.log（window.currentView）时，它会将el显示为未定义：（@beNerd，编辑了我的答案。你真的应该尝试在原始问题中提供所有信息。你可能希望
返回Backbone.View.prototype.remove.call（this）；
在
remove
中匹配默认行为。