JS global object, error when calling a public method

Question

I have a global jQuery object defined in an external file:

var App = function () {

    function handleTableRowSelection()
    {
        /*
        TRs being generated dynamically via json AJAX call. 
        Select nearest static element then pass in TRs.
        */
        $('table.allow-selection tbody').on('click', 'tr', function(e)
        {
            /*Don't change row class if clicking on a link (HTMLAnchorElement), or any other sub-element*/
            if ((e.target instanceof HTMLTableCellElement) == true)
            {
                var row = $(this);

                row.find('td').each(function()
                {
                    $(this).toggleClass('user-selected');
                });
            }
        });
    }

    return {
        init: function ()
        {
            handleTableRowSelection();
        },

    };
}();

When I call App.init(); in my $(document).ready it works fine (from my master blade template), even though I'm not passing any parameters to handleTableRowSelection.

When I try to call App.handleTableRowSelection('#details', 'table.allow-selection tbody tr') from a sub-template for a single view, I get "undefined is not a function".

I'm calling the init method in my master template like so: App.init();

I thought I'd be able to access the App object (my IDE code-completion finds it), is this not the case?

user229044 · Accepted Answer · 2014-07-03 15:26:44Z

3

App is being set to an IIFE which returns a structure that contains { init: <your function> }. No other functions are being exposed outside the IIFE - that is the whole point of the IIFE when used this way: To provide "private" storage for functions and to export a public interface.

If you want to be able to publicly invoke that function by that name, your last return needs to make it available as a property on the object it's "exporting":

return {
    init: function ()
    {
        handleTableRowSelection();
    },
    handleTableRowSelection: function () {
        handleTableRowSelection();
    }
};

edited Jul 3, 2014 at 15:26

answered Jul 3, 2014 at 15:09

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SteB Over a year ago

Would that not call handleTableRowSelection() twice?

user229044 Over a year ago

No, it wouldn't. You're returning an object with a function which invokes that function, once.

SteB Over a year ago

Then how does App.init() (in my master template) run the handle method if it's only returning it?

user229044 Over a year ago

It doesn't; I assumed you were doing that. As it stands, what you've written would require you to run App.init() to invoke that function.

Collectives™ on Stack Overflow

JS global object, error when calling a public method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related