Calling methods of a configuration object that is passed to a function in JavaScript/jQuery

I have a funciton that accepts a configuration object which in turn generates a modal dialog with jQuery UI like so:

function modalDialog(settings) {

    var options = $.extend({
        selector: '.dialog',                        // the dialog element selector 
        disabled: false,                            // disables(true) or enables (false) the dialog
        autoOpen: false,                            // dialog opens automatically when called (true), (false) dialog hidden until .dialog(open) method called 
        closeOnEscape: true,                        // dialog closes when focused and ESC key pressed
        closeText: 'close',                         // specifies text for close button
        draggable: false,                           // (true) dialog draggable by the title bar
        resizable: false,                           // dialog is resizable
        height: 'auto',                             // height of dialog in px
        minHeight: false,                           // min-height in px
        maxHeight: false,                           // max-height in px
        width: 300,                                 // width of dialog in px
        minWidth: 150,                              // min-width in px
        maxWidth: false,                            // max-width in px          
        modal: true,                                // disables other items on page
        hide: null,                                 // the effect to be used when dialog is closed
        show: null,                                 // the effect to be used when dialog is opened
        position: 'center',                         // specifies where dialog should be displayed: single string, array of co-ordiantes, array of string values
        title: '',                                  // dialog title.  Any valid HTML may be used
        zIndex: 1000,                               // starting z-index for the dialog
        stack: true                                 // specifies if dialogs will stack on other dialogs
    }, settings || {});

    $(options.selector).dialog({
        disabled: options.disabled,                         
        autoOpen: options.autoOpen,                          
        closeOnEscape: options.closeOnEscape,                       
        closeText: options.closeText,                           
        draggable: options.draggable,                           
        resizable: options.resizable,                           
        height: options.height,                             
        minHeight: options.minHeight,                           
        maxHeight: options.maxHeight,                           
        width: options.width,                                   
        minWidth: options.minWidth,                             
        maxWidth: options.maxWidth,                                 
        modal: options.modal,                               
        hide: options.hide,                                 
        show: options.show,                                 
        position: options.position,                         
        title: options.title,                                   
        zIndex: options.zIndex,                             
        stack: options.stack,
        create: function(event, ui){
            if (typeof options.createCall == 'function') {
                options.createCall.call(this);
            }           
        },
        open: function(event, ui){
            if (typeof options.openCall == 'function') {
                options.openCall.call(this);
            }           
        },
        beforeClose: function(event, ui){
            if (typeof options.beforeCloseCall == 'function') {
                options.beforeCloseCall.call(this);
            }           
        },  
        close: function(event, ui){
            if (typeof options.closeCall == 'function') {
                options.closeCall.call(this);
            }           
        },
        focus: function(event, ui){
            if (typeof options.focusCall == 'function') {
                options.focusCall.call(this);
            }           
        }       
    }); 
}

There is probably going to be a lot of modals on the project i am working on so i thought that it would be tidy to store the configuration objects within an object literal rather than generate them on the fly. Something like this:

icisSite.modalStore = {
    tradeFlowGraph: {
        selector: '.rtx-TradeFlowGraphs',
        title: 'Fertilizer Trade Flow graphs',
        width: 800,
        openCall: function(){
            carouselLink
            .eq(0)
            .trigger('click');
        }
    }
}

Then the modal could be created by passing the reference to the stored object:

modalDialog(icisSite.modalStore.tradeFlowGraph);

The issue i am having is that the openCall method is not being invoked when passed to the modalDialog function in this manner. It does work when the configuration object is passed like this and i don't know why:

modalDialog({
    selector: '.rtx-TradeFlowGraphs',
    title: 'Fertilizer Trade Flow graphs',
    width: 800,
    openCall: function(){
        carouselLink
        .eq(0)
        .trigger('click');
   开发者_如何学编程 }   
});

Whilst it is not an issue to pass the parameters like this it would be nice to have them all stored centrally in an object literal that is available all the time, rather than creating and passing objects ad hoc.

It seems as though bringing the icisSite.modalStore object literal into the jQuery scope fixes the issue.

So wrapping it in the factory function like so:

$(function(){

icisSite.modalStore = { tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs', width: 800,
openCall: function(){ carouselLink .eq(0) .trigger('click'); } } } });