Backbone.js的继承查看 [英] Backbone.js view inheritance

问题描述

我有一个名为潘内尔查看这仅仅是一个关闭按钮的背景。我想这个观点延伸到一个叫 PannelAdvanced 。我会怎么做，与Backbone.js的？

I have a view called Pannel which is just a background with a close button. I want to extend that view to one called PannelAdvanced. How would I do that with backbone.js?

现在所有的例子都 Backbone.View.Extend ，但这些只是延长 Backbone.View ;我想延长我的 PannelView 。

Right now all the examples have Backbone.View.Extend but those just extend Backbone.View; I want to extend my PannelView.

推荐答案

要继承视图的最简单的方法是做什么其他人都在评论中已经建议：

The easiest way to inherit a view is to do what other people have already suggested in the comments:

var Pannel = Backbone.View.extend({
});

var PannelAdvanced = Pannel.extend({
});

但就像你在你的评论中指出，如果你有一个潘内尔initialize方法，那么就不会被调用，如果你也有一个PannelAdvanced initialize方法，所以你必须显式调用潘内尔的初始化方法：

But like you've noted in your comments, if you have an initialize method in Pannel, then it won't be called if you also have an initialize method in PannelAdvanced, so you have to call Pannel's initialize method explicitly:

var Pannel = Backbone.View.extend({
   initialize: function(options){
      console.log('Pannel initialized');
      this.foo = 'bar';
   }
});

var PannelAdvanced = Pannel.extend({
   initialize: function(options){
      Pannel.prototype.initialize.apply(this, [options])
      console.log('PannelAdvanced initialized');
      console.log(this.foo); // Log: bar
   }
});

这是一个有点难看，因为如果你有很多，从潘内尔继承意见，那么你必须记住调用潘内尔的来自所有这些初始化。更糟的是，如果潘内尔没有一个初始化方法，但现在你选择将其添加在未来，那么你就需要去所有的继承类，在未来，并确保他们称之为潘内尔的初始化。因此，这里的定义潘内尔让你继承的观点不需要调用潘内尔的initialize方法的另一种方式：

It's a bit ugly because if you have a lot of Views that inherit from Pannel, then you'll have to remember to call Pannel's initialize from all of them. Even worse, if Pannel doesn't have an initialize method now but you choose to add it in the future, then you'll need to go to all of the inherited classes in the future and make sure they call Pannel's initialize. So here's an alternative way to define Pannel so that your inherited views don't need to call Pannel's initialize method:

var Pannel = function (options) {

    // put all of Panel's initialization code here
    console.log('Pannel initialized');
    this.foo = 'bar';

    Backbone.View.apply(this, [options]);
};

_.extend(Pannel.prototype, Backbone.View.prototype, {

    // put all of Panel's methods here. For example:
    sayHi: function () {
        console.log('hello from Pannel');
    }
});

Pannel.extend = Backbone.View.extend;


// other classes inherit from Panel like this:
var PannelAdvanced = Pannel.extend({

    initialize: function (options) {
        console.log('PannelAdvanced initialized');
        console.log(this.foo);
    }
});

var pannelAdvanced = new PannelAdvanced(); //Log: Pannel initialized, PannelAdvanced initialized, bar
pannelAdvanced.sayHi(); // Log: hello from Pannel

这篇关于Backbone.js的继承查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！