Extending an Object Function with jQuery

This website is no longer actively supported

Written by John DeVight on 28 Jun 2011 12:37

Download Sample Code

Overview

I was recently working on the Telerik Extensions For ASP.NET MVC : Extended Client API and needed to be able to execute some code after the Telerik Grid's dataBind function was called so that I could execute additional code to hide group columns. The Telerik Grid raises an OnDataBound event that I could subscribe to and provide my own event handler, but what if the developer needed to subscribe to the OnDataBound event for something else? I decided that the best way to handle this was to extend the dataBind function. I had 2 concerns with this:

1. The Telerik Grid's 'tGrid' class had already been instantiated in OnDocumentReady. Telerik's implementation of $(document).ready()
2. I didn't want to simply replace the dataBind function with my own dataBind function, copying the existing code into the new function and then adding code to it in case Telerik changes the dataBind function in a future release.

The solution that I came up with was: in the hideGroupColumns() function, copy the reBind() function and and give it the name reBindBase. I then created a new reBind() function for the current instance of the 'tGrid' class where I executed the reBindBase() function first. Finally, I added the additional code that I wanted to execute.

Extending a Function in for an Instance of an Object

In my example:

1. I have a class called Car. The Car has a function called drive().
2. When the page is loaded, the Car class is instantiated. The Car class is also extended to include a new function called extendDrive().
3. When the "Drive Car" button is clicked, the Car.drive() function is executed and displays text in a textarea.
4. When I click on the "Extend Drive" button, the Car.extendDrive() function is executed that extends drive() function in the instance of Car.
5. Now when I click the "Drive Car" button and the car.drive() function is executed, the "original" Car.drive() function is executed along with some additional code, and more text is displayed in the textarea.

Example

Here is the Car class:

function Car() {
}
Car.prototype.drive = function() {
    var text = 'Start car.\n' +
               'Put car in first gear.\n' +
               'Press accelerator to go.';
    $('#driveTextArea').text(text);
}

When the page is loaded, the Car class gets instantiated:

var _car = null;
 
$(document).ready(function() {
    _car = new Car();
});

The Car class is also extended to include a new function called extendDrive():

(function($){
    var carExtensions = {
        extendDrive: function() {
            this["driveBase"] = this.drive;
            this.drive = function() {
                this.driveBase();
                var text = $('#driveTextArea').text();
                text += '\nDrive carefully.';
                $('#driveTextArea').text(text);
            }
        }
    };
    $.extend(true, Car.prototype, carExtensions);
})(jQuery);

When the "Drive Car" button is clicked, the driveCar_onClick() function is executed:

driveCar_onClick = function() {
    _car.drive();
}

And you see the following text appear in the "driveTextArea" textarea:

Start car.
Put car in first gear.
Press accelerator to go.

When the "Extend car.drive" button is clicked, the extendDrive_onClick() function is executed. The drive() function in the _car instance is extended and the "driveTextArea" textarea is cleared:

extendDrive_onClick = function() {
    _car.extendDrive();
    $('#driveTextArea').text('');
}

Now when the "Drive Car" button is clicked, the text that is displayed in the driveTextArea includes additional text:

Start car.
Put car in first gear.
Press accelerator to go.
Drive carefully.

References

• Telerik MVC : Extending the Client API
• Telerik Extensions For ASP.NET MVC : Extended Client API
• Telerik Extensions for ASP.NET MVC : Grid - Grouping Demo

Comments

---