backbone.js视图继承,

pvabu6sv  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(166)

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

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

mlnl4t2r

mlnl4t2r1#

您是否尝试过在构造函数中而不是在initialize函数中扩展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'.
iqjalb3h

iqjalb3h2#

实际上,我不知道这是否能解决你的问题,但我通常这样做: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();

Model2::method中对this.constructor.__super__的调用将解析为(鼓声)Model2::method

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

deyfvvtc

deyfvvtc3#

您可以通过将下面一行添加到child的initialize方法中来解决此问题:

_.bind(this.business, this)

希望有人能给你一个比我更好的描述,但我会给予它一个机会:
发生的情况是,除非另有说明,否则该方法将使用定义它的作用域的上下文。当您调用parentView.prototype.initialize.apply(this)时,initialize被告知使用子对象的上下文,因为您将在childView中传递对apply方法的this引用。
您可以使用如上所述的underscore.js bind方法将业务方法绑定到子级的上下文。

相关问题