How to access the sub method inside a method from a jquery plugin?

Question

How can I access the sub method inside a method from a plugin? For instance, in the init method, I want to access the page method inside manage,

$this.cms(manage.page); // ReferenceError: manage is not defined

the basic structure,

(function($){

    var methods = {

        defaults: function(options) {

            // Default options.
            var defaults = {
                setup: {
                    directory: ""
                }           
            }

            // Always leave this line here.
            var options = $.extend(defaults, options);

            // Return the processed options.
            return options;

        },

        init : function( options ) {

            // Must declare a this as the plugin's root itself.
            var $this = this;

            // Call the local method from the plugin itself to get the processed options.
            var o = $this.cms('defaults',options);
            //alert("nothing to load");


            $this.cms(manage.page);
        },

        manage : {

            page: function(options){

                // Must declare a this as the plugin's root itself.
                var $this = this;

                // Call the local method from the plugin itself to get the processed options.
                var o = $this.cms('defaults',options);

                alert("page method");

            },
            menu: function(options){
            }

        },

        add : function( options ) {

        },

        erase : function( options ) { 

        },

        remove: function(object,options) { // to be developed.

        }
    };

    $.fn.cms = function( method ) {

        // @reference: http://docs.jquery.com/Plugins/Authoring#Namespacing
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );  // always change 'init' to something else if you different method name.
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.cms' );
        }

        return this; // this is needed to ensure chainability @reference: http://stackoverflow.com/questions/14008121/jquery-namespace-how-to-pass-default-options-from-one-method-to-the-subsequence

    };

})(jQuery);

Is it possible or any other better way of doing it? I just want to have children methods inside the parent methods.

score 0 · Answer 1 · answered Jul 13 '13 at 08:34

0

You can't access manage.page with the code you have. It only allows you to invoke properties of methods, not further properties.

You could put page() on the manage object and pass "page" to the plugin's function.

answered Jul 13 '13 at 08:34

alex

479,566
201
878
984

Thanks. How do I put `page()` on `manage` object? Can you show me some examples please...? – Run Jul 13 '13 at 08:39
@lauthiamkok That's a basic JavaScript question. I recommend researching how objects work in JavaScript. You could make the `manage` property a function that returns that new interface, of which you then call methods (you'll be outside of the *jQuery chain* though if you do that). – alex Jul 13 '13 at 08:45
@roasted Sure could, but then you need to design an interface to invoke that via a string (currently, it only supports direct members on `methods`). – alex Jul 13 '13 at 08:46

score 0 · Answer 2 · answered Jul 13 '13 at 10:22

Not sure I am doing it right or not, but here is my solution...

(function($){

    var methods = {

        defaults: function(options) {

            // Default options.
            var defaults = {
                setup: {
                    directory: ""
                }           
            }

            // Always leave this line here.
            var options = $.extend(defaults, options);

            // Return the processed options.
            return options;

        },

        init : function( options ) {

            // Must declare a this as the plugin's root itself.
            var $this = this;

            // Call the local method from the plugin itself to get the processed options.
            var o = $this.cms('defaults',options);
            //alert("nothing to load");


            $this.cms("manage").page();
        },

       manage : function(options){

            // Must declare a this as the plugin's root itself.
            var $this = this;

            // Call the local method from the plugin itself to get the processed options.
            var o = $this.cms('defaults',options);

            // Set the list for holding properties.
            var properties = {
                page : function(){ $.fn.page(); }
            }

            // Return the property.
            return properties;

        },

        add : function( options ) {

        },

        erase : function( options ) { 

        },

        remove: function(object,options) { // to be developed.

        }
    };

    $.fn.cms = function( method ) {

        // @reference: http://docs.jquery.com/Plugins/Authoring#Namespacing
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );  // always change 'init' to something else if you different method name.
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.cms' );
        }

        return this; // this is needed to ensure chainability @reference: http://stackoverflow.com/questions/14008121/jquery-namespace-how-to-pass-default-options-from-one-method-to-the-subsequence

    };

})(jQuery);

Then another plugin for page,

// A namepace structure:
(function($){

    var methods = {

        defaults: function(options) {

            // Default options.
            var defaults = {
                setup: {
                    directory: ""
                }           
            }

            // Always leave this line here.
            var options = $.extend(defaults, options);

            // Return the processed options.
            return options;

        },

        init : function( options ) {

            // Must declare a this as the plugin's root itself.
            var $this = this;

            // Call the local method from the plugin itself to get the processed options.
            var o = $this.page('defaults',options);

            alert("a page plugin: list page");
        },

        remove: function(object,options) { // to be developed.

        }
    };

    $.fn.page = function( method ) {

        // @reference: http://docs.jquery.com/Plugins/Authoring#Namespacing
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );  // always change 'init' to something else if you different method name.
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.page' );
        }

        return this; // this is needed to ensure chainability @reference: http://stackoverflow.com/questions/14008121/jquery-namespace-how-to-pass-default-options-from-one-method-to-the-subsequence

    };

})(jQuery);

It seems long/ tedious, but works.

How to access the sub method inside a method from a jquery plugin?

2 Answers2