Question

我有一个使用视图继承的案例，我的代码看起来基本上就像：

parentView = Backbone.View.extend({
    events: {
        "some event": "business"
    },
    initialize: function(){
        _.bindAll(this);
    },
    business: function(e){
        ...
        this.someFunc && this.someFunc();
        ...
     }
});

childView = parentView.extend({
    events: {
        ...
    },
    constructor: function(){
       this.events = _.extend( {}, parentView.prototype.events, this.events );
       parentView.prototype.initialize.apply( this );
    },
    initialize: function(){
       _.bindAll(this);
    },
    someFunc: function(){
       ...
    }
});

更新：将this.events扩展名移至构造函数。

我的子视图中包含someFunc，并且在父视图中的某些业务功能期间，它应该调用该函数（如果存在）。如果this已正确设置为childView，则this.someFunc应存在。然而，这不是我遇到的行为。

在initialize函数（在父级）中，this确实设置为子视图。但是，当some event触发时，调用business函数并将this设置为parentView。

Answer 1

您是否尝试在构造函数中扩展this.events，而不是在initialize函数中？如果你在初始化时这样做，那就太晚了;已经在构造函数中设置了business函数的事件委托，并指向parentView（请参阅Backbone.View的构造函数中对this.delegateEvents();的调用）。

更新了一个工作示例：

ParentView = Backbone.View.extend({
    name: 'ParentView',
    events: {
        "event": "business"
    },
    business: function(e){
        this.someFunc && this.someFunc();
    }
});

ChildView = ParentView.extend({
    name: 'ChildView',
    events: {
    },
    constructor: function(){
       this.events = _.extend( {}, ParentView.prototype.events, this.events );
       console.debug( this.events );
       ParentView.prototype.constructor.apply( this, arguments );
    },
    someFunc: function(){
        console.debug('someFunc; this.name=%s', this.name);
    }
});

child = new ChildView();
$( child.el ).trigger('event');
// logs 'this' in 'someFunc'; the name is 'ChildView'.

Answer 2

~~实际上，我不知道这是否能解决你的问题，但我通常会这样做：this.constructor.__super__.initialize.apply(this, arguments);并且像魅力一样。~~我的解决方案完全错误。原因如下：

var Model1 = Backbone.Model.extend({
  method: function () {
    // does somehting cool with `this`
  }
});

var Model2 = Model1.extend({
  method: function () {
    this.constructor.__super__.method.call(this);
  }
});

var Model3 = Model2.extend({
  method: function () {
    this.constructor.__super__.method.call(this);
  }
});

var tester = new Model3();

// Boom! Say hallo to my little stack-overflowing recursive __super__ call!
tester.method();

this.constructor.__super__中Model2::method的来电将解析为（鼓）Model2::method。

始终使用ExplicitClassName.__super__.methodName.call(this, arg1, arg2 /*...*/)或咖啡脚本的super。

Answer 3

您可以通过将此行添加到子项的initialize方法来解决此问题：

_.bind(this.business, this)

希望有人能指出你对我所能提供的基本机制的更好描述，但我会试一试：

除非另有说明，否则该方法将使用其定义的范围的上下文。当您调用initialize时，parentView.prototype.initialize.apply(this)被告知要使用子上下文，因为您使用this对apply方法的引用传入了childView。

您可以使用如上所述的underscore.js bind方法将业务方法绑定到子项的上下文。

backbone.js查看继承。父母的这个决议

3 个答案: