How to redefine object method in JS?

Question

I would like to overload method of a plugin.

This is the plugin that I use. http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js

The library contains the following method:

 updateControls : function () {
            var base = this;
            base.updatePagination();
            base.checkNavigation();
            if (base.owlControls) {
                if (base.options.items >= base.itemsAmount) {
                    base.owlControls.hide();
                } else {
                    base.owlControls.show();
                }
            }
        },

This is my script for method overloading:

jQuery(document).ready(function($){
            $.fn.owlCarousel = $.extend($.fn.owlCarousel, {
                updateControls:function()
                {
                    console.log("!!");
                    var base = this;
                    base.updatePagination();
                    base.checkNavigation();
                    if (base.owlControls) {
                        base.owlControls.show();
                        base.owlControls.show();
                    }
                }
            });
        })

console.log("!!"); does not appear to be called - what am I doing wrong?

Answer 1

In this case, it would appear that the initializer for owlCarousel does not accept options to override the updateControls internal function. You may need to modify the library to accept (and use) an override for the updateControls function.

An example of such an edit would be modifying the init function in the library, although I'd recommend making use of the options object in order to override the function.

var Carousel = {
    init : function (options, el) {
        var base = this;

        base.$elem = $(el);
        base.options = $.extend({}, $.fn.owlCarousel.options, base.$elem.data(), options);

        base.userOptions = options;

        // check for override in options of updateControls function
        if (typeof base.userOptions.updateControls == "function") base.updateControls = base.userOptions.updateControls;

        base.loadContent();
    }

This modified init function would allow you to specify the updateControls function, as you have done in your second code sample.