始终在 Backbone 中执行 parent 函数

Question

我想在 Backbone 中定义一个扩展 Backbone.View 的 parent 视图。所有 child 视图都将从 parent 视图继承。但是每次创建 child 视图的新实例时，我都希望执行 parent 视图中的函数。这是一个示例（fiddle 是 here）：

    SimpleSample = {};

    SimpleSample.ParentView = Backbone.View.extend({

        initialize: function(){
            //always execute this
            console.log('in parent view initialise');
        }
    });

    SimpleSample.Child1 = SimpleSample.ParentView.extend({

        initialize: function(){
            console.log('in child 1 initialise');
        }
    });


    SimpleSample.Child2 = SimpleSample.ParentView.extend({

    });

    SimpleSample.App = function(){
        this.start = function(){
            var child1 = new SimpleSample.Child1();
            var child2 = new SimpleSample.Child2();
        }
    }

    $(function(){
        var app = new SimpleSample.App();
        app.start();
    })

如您所料，此输出是：

in child 1 initialise
in parent view initialise

因为我为Child1定义了initialize()，ParentView中定义的initialize()中的代码没有运行。我不想从每个 child 显式调用 ParentView 函数。每次有一个新的继承自 ParentView 的视图实例时，是否总是在 ParentView 中执行一些代码？

Answer 1

javascript没有真正的超级。

您可以通过原型对象显式调用父视图中的函数

SimpleSample.Child1 = SimpleSample.ParentView.extend({

    initialize: function(){
        console.log('in child 1 initialise');
        SimpleSample.ParentView.prototype.initialize.apply(this);
    }
});

http://jsfiddle.net/yzowyhc5/5/

Answer 2

您可以覆盖构造函数（在父视图中）

SimpleSample.ParentView = Backbone.View.extend({

   initialize: function(options){
       //always execute this
       console.log('in parent view initialise');
   }

   constructor: function (options) {
       Backbone.View.apply(this, arguments);
       SimpleSample.ParentView.prototype.initialize.apply(this, options);
   }

});

它负责从 Backbone.View 调用原始构造函数，并调用您的初始化函数。

现在您的子视图应该可以自由定义它们自己的初始化函数。

Answer 3

我们使用 Backbone-Super 插件已经一年多了。经过良好测试且易于添加到大多数项目中。有了它，sub-class 的初始化看起来像这样：

initialize: function(options) {
    console.log('in child 1 initialise');
    this._super(options);
}

它从不调用超级class "automatically"，但它确实使正确调用变得足够容易。它也适用于所有方法，而不仅仅是 initialize，所以 ...

set: function(attributes, options) {
     this._super(attributes, options);
     console.log('Child 1 just had "set" called');
}

始终在 Backbone 中执行 parent 函数

Always execute parent function in Backbone

javascript

backbone.js