Backbone.js 视图继承

问题描述

我有一个名为 Panel 的视图，它只是一个带有关闭按钮的背景.我想将该视图扩展到名为 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({
});

但是就像您在评论中指出的那样，如果您在 Pannel 中有一个 initialize 方法，那么如果您在 PannelAdvanced 中也有一个 initialize 方法，它将不会被调用，因此您必须显式调用 Pannel 的 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
   }
});

这有点难看，因为如果你有很多继承自Pannel的视图，那么你必须记住从所有这些视图中调用Pannel的初始化.更糟糕的是，如果 Pannel 现在没有 initialize 方法但您选择在将来添加它，那么您将来需要访问所有继承的类并确保它们调用 Pannel 的 initialize.所以这里有另一种定义 Pannel 的方法，这样你继承的视图就不需要调用 Pannel 的 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 视图继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！