Question

我正在声明一个这样的视图：

var VirtualFileSelectorView = Backbone.View.extend({
    selected: function() {
        console.log("selected function");
    },

    initialize: function() {
        // Shorthand for the application namespace
        var app = brickpile.app;
        // bind to the selected event
        app.bind('selected', this.selected, this);
    }
});

然后我实例化了这个View的两个实例，就像你在这里看到的那样：http://cl.ly/H5WI

问题是当选择了事件时，选择了功能两次？

Answer 1

阅读评论主题后，我想我已经明白如何帮助解决您的问题：

在您的代码中，两个视图都在侦听相同的全局事件，因此它们都会同时响应，并且您希望能够触发每个selected()独立查看。

执行此操作的常用方法是View与模型关联，并且View正在侦听该模型上的事件，因此仅为一个模型触发的事件将影响与其关联的视图。

此模式如下所示：

// code simplified and not tested
var MyView = Backbone.View.extend({
  initialize: function( opts ){
    this.model = opts.model;
    this.model.on( "selected", this.selected, this );
  },

  selected: function( model ){
    // ...
  }
})

var oneModel = new MyModel();
var oneView = new MyView({ model: oneModel });

现在您只需要在需要时在每个模型上触发selected事件。

更新

此模式非常常见，以至于Backbone会为您View.model引用关联，以便您可以像这样实现View.initialize：

initialize: function(){
  this.model.on( "selected", this.selected, this );
}

Answer 2

当您声明了VirtualFileSelectorView的两个实例时，您有选择事件的观察员。

即使你重用旧的View实例的引用来引用新的View实例，旧的实例仍然存在，因为仍然存在针对它的引用。

这是Backbone中一个非常常见的问题，我认为人们开始称之为“ghosts Views”。

要解决此问题，您必须unbind所有View 绑定的事件，您可以在示例中执行此操作：

app.virtualFileSelectorView.off( null, null, this );

Derick Bailey有excellent post about this matter。

另外，为了谦虚，我想链接到一个study about this matter，我试图理解这种顽强的行为。

事件发生两次

2 个答案:

更新