子类 a Backbone.View 子类 &保留事件 [英] Sub Class a Backbone.View Sub Class & retain events

问题描述

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

I have a generic subclass of Backbone.View which has a close event listener.

var GenericView = Backbone.View.extend({

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

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

});

我想继承这个泛型类并添加一些新事件.然而，下面将覆盖超类(上面)事件对象.例如

I want to subclass this generic class and add some new events. However the below will overwrite the super classes (above) event object. E.g.

var ImplementedView = new GenericView({

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

}); 

我应该如何创建子类，在这种情况下 ImplementedView 并保留事件?

How should I create a sub class, in this case ImplementedView and retain the events?

我找到了一种方法来实现这一点，即在构造子类时扩展事件对象.但是我需要重新触发 this.delegateEvents()，我猜这不太好.任何人都可以对此发表评论吗?

I have found one way to achieve this, by extending the event object when the child class is constructed. However I need to re-trigger this.delegateEvents(), which I am guessing is not good. Can any one comment on this?

var ImplementedView = new GenericView({

    initialize : function (options) {

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

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

});

推荐答案

@Nupul 是完全正确的:你没有继承你的 GenericView.

@Nupul is exactly right: you're not subclassing your GenericView.

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

In fact, subclassing isn't really the right word here, since JavaScript doesn't do classical inheritance.

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

So let's first try and understand what's happening here:

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

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

Backbone.View is a constructor function, that when called with the new keyword, creates a new object for you.

由于这是 JS，所有函数都是真正的函数对象，所以 Backbone.View.extend 只是一个挂在 Backbone.View 上的函数，它做了一些事情:

Since this is JS, all function are really function objects, so Backbone.View.extend is just a function hanging off Backbone.View that does a few things:

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

1. It sets up the prototype chain, so you can access properties and call functions defined in the 'base' class
2. It creates and returns a new constructor function you can call (which here would be GenericView) to instantiate objects of your inheriting class
3. It copies itself to be a function hanging off the constructor function it returns so that you can further inherit.

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

So the correct way to set up the protoype chain you want is:

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

而不是:

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

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

because this just creates a new instance of a GenericView.

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

Now, you still have a problem, because when you do something like:

var impl_view = new ImplementedView;

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

此时有多种方法可以得到您想要的结果，这里有一种使用 delegateEvents 的方法，有点像您所做的.顺便说一句，使用它也不错.

At this point there are different ways to get the result you want, here's one that uses delegateEvents kind of like how you did. Using it isn't bad, incidentally.

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

这篇关于子类 a Backbone.View 子类 &保留事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！