javascript - 子类视图渲染后如何渲染超类视图？

Question

我不能调用超类的渲染

Super = Backbone.View.extend({

     render : function(){
          //super class code here   (unable to call)
          return this;
     }

}); 

Sub = Super.extend({

     render : function(){
          //sub class code here    (called)
          return this;
     }

});

var view = new Sub();
view.render();

我想先调用子类渲染，然后再调用超类渲染。在某些情况下，超类先渲染，然后子类渲染。

那么，是否可以根据用户要求在不更改 Super 类 和不更改函数名称的情况下编写调用超类渲染之前或之后调用超类渲染的子类渲染。

那么，我错过了什么？

提前致谢。

Answer 1

我可能在这里遗漏了一些东西，但你可以在你的Sub.render函数中调用 Super 原型的 render 方法：

Super = Backbone.View.extend({
     render : function(){
          console.log('super render');
          return this;
     } 
});

Sub = Super.extend({
     render : function(){
          console.log('sub render');
          Super.prototype.render.call(this);
          return this;
     } 
});

var view = new Sub();
view.render();

还有一个小提琴http://jsfiddle.net/WATqe/

Answer 2

另一种方法：

Super = Backbone.View.extend({

     render : function(){
          //super class code here   (unable to call)
          if (typeof this.postRender === "function") {
            this.postRender();
          }
          return this;
     }

}); 

Sub = Super.extend({

     postRender : function(){
          //sub class code here    (called)
          return this;
     }

});

var view = new Sub();
view.render();

view.render() 将在 super 上调用 render，如果 postRender 存在，则无论在哪里定义 postRender（super、sub、subsub 等），它都会调用 postRender。

更新：如果你不能修改 super 那么你可以尝试：

Sub = Super.extend({
    initialize : function () {
       if (this.render) {
           var render = this.render;
           this.render = function () {
               render.call(this);
               // sub class render code goes here
           };
       }
    }
});

Answer 3

您可以根据需要构建生命周期

例如，

在超级

...
preRender_: function () {
    // maybe empty, for override
    ...
},
render_: function () {
    // do real render here
    ...
},
postRender_: function () {
    // maybe empty, for override
    ...
},
render: function () {
    preRender_();
    render_();
    postRender_();
}

在子

// override preRender_, render_ or postRender_ as needed