【问题标题】:Dynamic jQuery UI dialog callback function problems动态jQuery UI对话框回调函数问题
【发布时间】:2021-01-21 22:14:13
【问题描述】:

我在使用 jQuery UI 对话框模式时遇到问题,并尝试传入一个动态名称/值以用作要执行的回调函数(以及参数)

我有一个调用 UI 对话框的函数......作为接受参数列表,其中一个是回调函数名称......以及伴随它的任何参数。

我无法让 jQuery 将动态名称/参数识别为函数。

function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, argList){
var btn1css;
var btn2css;

//hide buttons if not in use
if(btn1text == ''){
    btn1css = "hidecss";
}else{
    btn1css = "showcss";
}

if(btn2text == ''){
    btn2css = "hidecss";
}else{
    btn2css = "showcss";
}

//main message/content
$("#lblMessage").html(content);


//params
$("#dialog").dialog({
    resizable: false,
    title: title,
    modal: true,
    width: '400px',
    height: 'auto',
    bgiframe: false,
    //hide: {effect: 'scale', duration: 100},
    
    buttons: [
        {
            text: btn1text,
            "class": btn1css,
            click: function () {
                //alert("button 1 pressed");
                
                //new dialog when cup is in position
                console.log('Call Back Check: ' + callbackFunction);
                console.log("Arg List: " + argList);
                eval(callbackFunction + '()'); // executes, but cant get any params?
                eval(callbackFunction + '(' +argList +')'); //doesnt work
                //callbackFunction(argList); // doesnt work


                //functionTest = window[callbackFunction];
                //functionTest(argList);
                
                //Goal: call new ShowDialogBox with different callback function name
                //ShowDialogBox('', 'Press start when the cup is in the holder.', 'Start', '', 'submitFunction',null);
                
                $("#dialog").dialog('close');
                
            }
        },
        {
            text: btn2text,
            "class": btn2css,
            click: function () {
                //alert("button 2 pressed");
                $("#dialog").dialog('close');
            }
        }
    ]
});

}

callbackFunction - 要调用的回调函数的名称 (ShowDialogBox) argList - 伴随所述回调函数的参数/参数列表

这是它的调用方式(回调函数名称为:ShowDialogBox 再次[但这次使用不同的回调函数])

ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', 'ShowDialogBox','mutiple ags go here, as commana string? array?');

我的问题:

1.) 我如何传递:ShowDialogBox 作为 callbackFunction 参数/值,并将其视为在单击按钮 #1 后执行的实际函数?

2.) 我怎样才能将参数列表传递给这个“动态”命名的回调数组?

更新:所以我可以执行动态功能(可以这么说)..但我似乎无法传递任何参数?

更新 2:现在向我指出了扩展语法.. 事情正在满足我的需要.. 但我想我有一个关于扩展它的问题?

  • 为发布而修剪,没有参数,没有按钮操作..etc

      function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, ...argList){
      //if not empty....execute it as a function! (nice)
      if(callbackFunction != ''){                         
          // Execute the callback (spread syntax)
          callbackFunction(...argList);
      }
     }
    

有效:(因为我最后一个嵌套的回调函数没有任何参数要传递)

//double verify (dialog prompts)
ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', ShowDialogBox, '', 'Please place drink in holder and press start when ready.', 'Start', '', submitForm, '');

但这不起作用..因为传递了一个额外的嵌套 callBackFunction 名称.. AND 参数? (但是由于第一个 callBackFunction 参数之后的所有内容现在都是“...argList”。我不知道如何访问它?(如果可能的话))

ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', callBackTest, 'Some Title', 'Some Message', 'Button 1 text', 'Button 2 text', someOtherCallBackFunction, 'no', 'args allowed', 'in nested callback function? how is it done (again?)');

【问题讨论】:

    标签: javascript jquery jquery-ui dialog dynamic-function


    【解决方案1】:

    对于第一个问题,只是不要引用回调函数名称。

    ShowDialogBox('', text , 'Continue','No', submitForm);
    
    function submitForm() { /* ... */ }
    

    要向它传递动态数量的参数,请使用spread syntax,这将创建一个数组,其中包含传递给函数并返回到各个参数的所有剩余参数。

    function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, ...argList) {
        // Execute the callback
        callbackFunction(...argList);
    }
    

    【讨论】:

    • 太棒了!感谢您提供有关报价的提示。我没有完全理解“扩展语法”......但它在很大程度上是有效的。至少在这种情况下,它按预期工作。不过,我确实还有另一个问题......一个,然后“嵌套”另一个对相同函数的调用......再次使用相同(长度)的参数?从理论上讲,这个“函数”可以被一遍又一遍地调用。 (每次都需要动态回调函数名称。AND 参数列表...更新 OP 以获取新示例。
    • @whispers 当调用ShowDialog 时,无论你传递给的许多参数 ìt 都会被转换成一个数组,假设:(callback, 1, 2, 3), then args` 将是数组[1, 2, 3] 如果您只需将它传递给回调,它只是一个参数,即数组本身,但通过使用(...args) 调用它,数组将被解包到各个项目。解压后的参数无论如何都会传递给函数,但与它定义的一样多。
    • 谢谢...我难以掌握的是..我如何动态地传递另一个(嵌套)args组?到后来嵌套的动态命名/调用 callBackFunction?现在..我的对话框函数接受一些文本参数..还有一个回调函数名称和该回调函数的任何参数。这似乎适用于第一个回调/参数参数..但是第二个对话框提示(由回调触发)也有一个回调函数..(它执行..但我无法弄清楚将参数传递给那个函数也?(动态)
    • @whispers 因为argList 是一个数组并且固定参数是已知的,所以对数组进行切片或使用destructuring。但是回调的参数数量是可变的,您必须深入了解每个级别,您可以使用callbackFunction.length。要链接多个操作,请考虑Promises
    猜你喜欢
    • 2011-10-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-13
    • 1970-01-01
    • 2011-05-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多