CODEWITHSUNDEEP
jqueryjquery-plugins
Bill Software Engineer
Bill Software Engineer

Reputation: 7782

In JQuery Extension Function, how do I access the instance options?

I have an JQuery Extension with Functions, I am not sure how to access the instance's options:

    (function ($) {

    $.fn.MyExtension= function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.MyExtension');
        }
    };

    var methods = {
        init: function (options) {
            var defaults = {
                testOption: "test"
            };
            options = $.extend(defaults, options);

            return this.each(function () {
                 // Code logic goes here
            }

        MyFunction: function () {
            var optionVal = options.testOption;
        }
    };

})(jQuery);

So this code throw an error when I call MyFunction because it does not know what "options" is.

Upvotes: 0

Views: 214

Answers (2)

Kevin B
Kevin B

Reputation: 95028

Store it on the element's data object. http://jsfiddle.net/U7QT5/

(function ($) {

    $.fn.MyExtension = function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.MyExtension');
        }
    };

    var methods = {
        init: function (options) {
            var defaults = {
                testOption: "test"
            };
            return this.each(function () {
                var $this = $(this);
                $this.data("MyExtension",$.extend(defaults, options));
                // Code logic goes here
            });
        },
        MyFunction: function () {
            var optionVal = this.data("MyExtension").testOption;
            console.log(optionVal);
        }
    };

})(jQuery);

$("body").MyExtension({testOption: "foobar!"}).MyExtension("MyFunction");

Upvotes: 1

Colin DeClue
Colin DeClue

Reputation: 2244

So, this is just a simple scoping issue, I believe. You have the object options being passed into init, but it's local to that function. You need to put it on the object so that your other function, MyFunction has scope to it.

var methods = {
    init: function (options) {
        var defaults = {
            testOption: "test"
        };
        this.currentOptions = $.extend(defaults, options);

        return this.each(function () {
             // Code logic goes here
        }

    MyFunction: function () {
        var optionVal = this.currentOptions.testOption;
    }
};

Upvotes: 0

Related Questions