Search code examples
javascriptviewbackbone.jsoverriding

Backbone: Call an extended view's overridden render() function


I have a WorkoutExerciseRowView which extends ExerciseRowView. The render functions are extremely similar, except the WorkoutExerciseRowView must add a few parameters to ExerciseRowView's render. How can I call ExerciseRowView's render function inside WorkoutExerciseRowView's render function?

var WorkoutExerciseRowView = ExerciseRowView.extend( {      
    render : function() {
        //return this.constructor.render({ // doesn't work
        return this.render({ // doesn't work
            workoutExercise : this.model,
            exercise : this.model.get("exercise"),
            workoutSection : this.model.get("section"),
            isEditable : true,
            number : this.number,
            WorkoutExercise : WorkoutExercise,
            WorkoutSection : WorkoutSection
        });
    }
});

Thanks!


Solution

  • var WorkoutExerciseRowView = ExerciseRowView.extend( {      
        render : function() {
            return ExerciseRowView.prototype.render.call(this,{
                workoutExercise : this.model,
                exercise : this.model.get("exercise"),
                workoutSection : this.model.get("section"),
                isEditable : true,
                number : this.number,
                WorkoutExercise : WorkoutExercise,
                WorkoutSection : WorkoutSection
            });
        }
    });
    

    From Backbone's documentation here: http://backbonejs.org/#Model-extend

    Brief aside on super: JavaScript does not provide a simple way to call super — the function of the same name defined higher on the prototype chain. If you override a core function like set, or save, and you want to invoke the parent object's implementation, you'll have to explicitly call it, along these lines:

    Backbone.Model.prototype.set.call(this, attributes, options);