javascript - 对 Backbone 进行子类化。查看子类并保留事件

Question

我有一个 Backbone.View 的通用子类，它有一个 close 事件监听器。

var GenericView = Backbone.View.extend({

    events : {
        "click .close" : "close"
    },

    close : function () {
        console.log("closing view");
    }

});

我想对这个通用类进行子类化并添加一些新事件。但是，下面的内容将覆盖父类(super class)(上面)的事件对象。例如

var ImplementedView = new GenericView({

    // setting this will stop 'close' in Super Class from triggering
    events : {
        "click .submit" : "submit"
    }

}); 

我应该如何创建一个子类(在本例中为ImplementedView)并保留事件？

我找到了一种方法来实现此目的，即在构造子类时扩展事件对象。但是我需要重新触发 this.delegateEvents()，我猜这不好。有人可以评论一下吗？

var ImplementedView = new GenericView({

    initialize : function (options) {

        _.extend(this.events, {
            "click .submit" : "submit"
        });

        // re-attach events
        this.delegateEvents();
    }

});

Answer 1

@Nupul 是完全正确的:您没有子类化 GenericView。

事实上，子类化在这里并不是真正正确的词，因为 JavaScript 不执行经典继承。

所以让我们首先尝试了解这里发生了什么:

var GenericView = Backbone.View.extend( propertiesObj, classPropertiesObj )

Backbone.View 是一个构造函数，当使用 new 关键字调用时，会为您创建一个新对象。

由于这是 JS，所以所有函数实际上都是函数对象，因此 Backbone.View.extend 只是一个卡在 Backbone.View 上的函数，它执行以下操作:

1. 它设置原型(prototype)链，以便您可以访问属性并调用“基”类中定义的函数
2. 它创建并返回一个新的构造函数，您可以调用该函数(此处为 GenericView)来实例化继承类的对象
3. 它将自身复制为一个挂载在其返回的构造函数上的函数，以便您可以进一步继承。

所以设置你想要的原型(prototype)链的正确方法是:

var ImplementedView = GenericView.extend({
  // implementation goes here
});

而不是:

var ImplementedView = new GenericView({//stuff});

因为这只是创建一个 GenericView 的新实例。

现在，您仍然遇到问题，因为当您执行以下操作时:

var impl_view = new ImplementedView;

impl_view.events; // This isn't merged with the events you created
                  // for the GenericView

此时，有不同的方法可以获得您想要的结果，这里有一种使用 delegateEvents 的方法，就像您所做的那样。顺便说一句，使用它也不错。

var GenericView = Backbone.View.extend({

  genericEvents: { 'click .close': 'close' },

  close: function() { console.log('closing view...'); }

});

var ImplView = GenericView.extend({

  events: { 'click .submit': 'submit' },

  initialize: function(options) {
    // done like this so that genericEvents don't overwrite any events
    // we've defined here (in case they share the same key)
    this.events = _.extend({}, this.genericEvents, this.events);
    this.delegateEvents()
  }
});