CODEWITHSUNDEEP
javascriptoopbackbone.jsbackbone-views
user1672982
user1672982

Reputation:

How can i render super class view after subclass view render?

i cant call super class's render

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();

i want to call sub class render first and then super class render. in some case, super class render first and then sub class render.

so, is it possible to code subclass render which call super class render before or after as per user requirement, without changing Super class and without changing name of function.

So, what am i missing?

thanks, in advance.

Upvotes: 2

Views: 1677

Answers (3)

nikoshr
nikoshr

Reputation: 33344

I may be missing something here, but you can call the render method on the prototype of Super in your Sub.render function :

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();

And a Fiddle http://jsfiddle.net/WATqe/

Upvotes: 4

Mark
Mark

Reputation: 5720

A different approach:

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() would call render on the super, which would then call postRender if it exists regardless of where postRender is defined (super, sub, subsub, etc).

UPDATE: If you can't modify super then you could try:

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

Upvotes: 1

benbai123
benbai123

Reputation: 1463

You can construct life cycle as needed

e.g.,

in super

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

in sub

// override preRender_, render_ or postRender_ as needed

Upvotes: 0

Related Questions