Question

我有一个接受配置对象的函数，该配置对象反过来生成一个带有jQuery UI的模态对话框，如下所示：

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);
            }           
        }       
    }); 
}

我正在研究的项目可能会有很多模态因此我认为将配置对象存储在对象文字中而不是动态生成它会很整洁。像这样：

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

然后可以通过将引用传递给存储的对象来创建模态：

modalDialog(icisSite.modalStore.tradeFlowGraph);

我遇到的问题是，当以这种方式传递给 modalDialog 函数时，不会调用 openCall 方法。当配置对象像这样传递并且我不知道原因时它确实有效：

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

虽然传递这样的参数不是一个问题，但将它们全部存储在一直可用的对象文字中，而不是创建和传递对象，这样会很好。

Answer 1

似乎将 icisSite.modalStore 对象文字带入jQuery范围可以解决问题。

所以将它包装在工厂函数中就像这样：

$（函数（）{

icisSite.modalStore = {         tradeFlowGraph：{
  选择器：'。rtx-TradeFlowGraphs'，
  标题：'肥料贸易流量图'，   宽度：800，
  openCall：function（）{   carouselLink                 .EQ（0）                 .trigger（ '点击'）; }}}} ;;

调用传递给JavaScript / jQuery中的函数的配置对象的方法

1 个答案: