子类一Backbone.View子类放大器＆;保留事件 [英] Sub Class a Backbone.View Sub Class & retain events

问题描述

我 Backbone.View 的一个通用的子类，它有一个关闭事件侦听器。

  VAR GenericView = Backbone.View.extend（{    事件：{
        点击.close：关
    }，    关闭：函数（）{
        的console.log（闭幕视图）;
    }}）;
 

我要继承这个通用类，并添加一些新的事件。然而，下面将覆盖超类（上图）事件对象。例如。

  VAR ImplementedView =新GenericView（{    //设置这个将在中超类停止关闭从触发
    事件：{
        点击.submit：提交
    }}）;
 

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

我已经找到了实现这一目标的一种方式，由子类构造时延长的事件对象。不过，我需要重新触发 this.delegateEvents（），我猜是不好的。可以在此任意一个评论？

  VAR ImplementedView =新GenericView（{    初始化：功能（选件）{        _.extend（this.events，{
            点击.submit：提交
        }）;        //重新连接事件
        this.delegateEvents（）;
    }}）;
 

解决方案

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

其实，子类是不是真的正确的字在这里，因为JavaScript没有做经典的继承。

因此​​，让我们第一次尝试和了解这里发生了什么：

  VAR GenericView = Backbone.View.extend（propertiesObj，classPropertiesObj）
 

Backbone.View 是一个构造函数，当它与新关键字调用，创建一个新的对象你。

由于这是JS，所有功能真正发挥作用对象，所以 Backbone.View.extend 只是挂了一个函数 Backbone.View ，做了几件事情：

1. 它设置了原型链，这样你就可以访问属性和调用'基地'类定义的函数


2. 创建并返回一个新的构造函数可以调用（这在这里将 GenericView ）来实例化继承类的对象


3. 将自身复制到被挂返回，这样就可以进一步继承的构造函数的函数。

所以设置你想要的protoype链正确的方法是：

  VAR ImplementedView = GenericView.extend（{
  //执行到这里
}）;
 

和NOT：

  VAR ImplementedView =新GenericView（{//东西}）;
 

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

现在，你还有一个问题，因为当你做这样的事情：

  VAR impl_view =新ImplementedView;impl_view.events; //这是不是与您创建的合并事件
                  //为GenericView
 

在这一点上有不同的方式得到你想要的结果，下面是一个使用 delegateEvents 有点像你是怎么做到。使用它是不坏，顺便说一句。

  VAR GenericView = Backbone.View.extend（{  genericEvents：{'点击.close'：'接近'}，  关闭：函数（）{的console.log（'收盘查看...'）; }}）;VAR ImplView = GenericView.extend（{  事件：{'点击.submit'：'提交'}，  初始化：功能（选件）{
    //做过这样的，这样genericEvents不覆盖任何事件
    //我们在这里定义（如果它们共享相同的密钥）
    this.events = _.extend（{}，this.genericEvents，this.events）;
    this.delegateEvents（）
  }
}）;
 

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

}); 

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

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 is exactly right: you're not subclassing your GenericView.

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 is a constructor function, that when called with the new keyword, creates a new object for you.

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

and NOT:

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

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

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

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