显示对话框时设置 AlertifyJS 回调

Question

我正在使用 AlertifyJS 来显示自定义表单并调用以更改多条记录。 我已经定义了一个显示对话框的函数：

function showDialog(title, formDialog, callbackfunction, params) {
    alertify.dialog('customModal', function factory() {
        var placeholder = null
        return {
            main: function (content) {
                if (content instanceof HTMLElement && content.parentNode) {
                    placeholder = placeholder || document.createComment('')
                    content.parentNode.insertBefore(placeholder, content)
                }
                this.setContent(content);
            },
            setup: function () {
                return {
                    /* buttons collection */
                    buttons: [
                        /*button defintion*/
                        {
                            /* button label */
                            text: 'OK',
                            /*bind a keyboard key to the button */
                            key: 27,
                            /* indicate if closing the dialog should trigger this button action */
                            invokeOnClose: false,
                            /* custom button class name  */
                            className: alertify.defaults.theme.ok,
                            /* custom button attributes  */
                            //attrs: { buttonValue: 'submit' },
                            /* Defines the button scope, either primary (default) or auxiliary */
                            scope: 'auxiliary',
                            /* The will conatin the button DOMElement once buttons are created */
                            element: undefined
                        },
                        {
                            /* button label */
                            text: 'Cancel',
                            /*bind a keyboard key to the button */
                            //key: 27,
                            /* indicate if closing the dialog should trigger this button action */
                            invokeOnClose: false,
                            /* custom button class name  */
                            className: alertify.defaults.theme.cancel,
                            /* custom button attributes  */
                            //attrs: { buttonValue: 'submit' },
                            /* Defines the button scope, either primary (default) or auxiliary */
                            scope: 'auxiliary',
                            /* The will conatin the button DOMElement once buttons are created */
                            element: undefined
                        }
                    ],
                    options: {
                        basic: false,
                        maximizable: false,
                        resizable: false,
                        padding: false,
                        closableByDimmer: false,
                        title: 'My custom dialog'
                    }
                };
            },
            callback: function (closeEvent) {
                //The closeEvent has the following properties
                //
                // index: The index of the button triggering the event.
                // button: The button definition object.
                // cancel: When set true, prevent the dialog from closing.
                console.log(closeEvent);
                if (closeEvent.index == 0) { //OK Button
                    callbackfunction(params);
                }
            },
            hooks: {
                onclose: function () {
                    if (placeholder != null) {
                        var node = this.elements.content.firstElementChild
                        node.style.display = 'none'
                        placeholder.parentNode.insertBefore(node, placeholder)
                    }
                }
            }
        };
    });

    alertify.customModal($(formDialog)[0]).set('title', title);
    $(formDialog).show();
}

此函数会导致“alertify.dialog：名称已存在”的问题。我只是将对话框声明移到了该函数之外的 document.ready 函数中，但我不知道如何传递回调函数：

$(document).ready(function () {
    alertify.dialog('customModal', function factory() {
        var placeholder = null
        return {
            main: function (content) {
                if (content instanceof HTMLElement && content.parentNode) {
                    placeholder = placeholder || document.createComment('')
                    content.parentNode.insertBefore(placeholder, content)
                }
                this.setContent(content);
            },
            setup: function () {
                return {
                    /* buttons collection */
                    buttons: [
                        /*button defintion*/
                        {
                            /* button label */
                            text: 'OK',
                            /*bind a keyboard key to the button */
                            key: 27,
                            /* indicate if closing the dialog should trigger this button action */
                            invokeOnClose: false,
                            /* custom button class name  */
                            className: alertify.defaults.theme.ok,
                            /* custom button attributes  */
                            //attrs: { buttonValue: 'submit' },
                            /* Defines the button scope, either primary (default) or auxiliary */
                            scope: 'auxiliary',
                            /* The will conatin the button DOMElement once buttons are created */
                            element: undefined
                        },
                        {
                            /* button label */
                            text: 'Cancel',
                            /*bind a keyboard key to the button */
                            //key: 27,
                            /* indicate if closing the dialog should trigger this button action */
                            invokeOnClose: false,
                            /* custom button class name  */
                            className: alertify.defaults.theme.cancel,
                            /* custom button attributes  */
                            //attrs: { buttonValue: 'submit' },
                            /* Defines the button scope, either primary (default) or auxiliary */
                            scope: 'auxiliary',
                            /* The will conatin the button DOMElement once buttons are created */
                            element: undefined
                        }
                    ],
                    options: {
                        basic: false,
                        maximizable: false,
                        resizable: false,
                        padding: false,
                        closableByDimmer: false,
                        title: 'My custom dialog'
                    }
                };
            },
            callback: function (closeEvent) {
                //The closeEvent has the following properties
                //
                // index: The index of the button triggering the event.
                // button: The button definition object.
                // cancel: When set true, prevent the dialog from closing.
                console.log(closeEvent);
                if (closeEvent.index == 0) { //OK Button
                    callbackfunction(params);
                }
            },
            hooks: {
                onclose: function () {
                    if (placeholder != null) {
                        var node = this.elements.content.firstElementChild
                        node.style.display = 'none'
                        placeholder.parentNode.insertBefore(node, placeholder)
                    }
                }
            }
        };
    });

    });
function showDialog(title, formDialog, callbackfunction, params) {

    alertify.customModal($(formDialog)[0]).set('title', title); //pass callback function here
    $(formDialog).show();
}

谢谢

Answer 1

您需要将对话框的创建与实例化分开，如 cmets !alertify.customModal && alertify.dialog('customModal'.... 中所述，确保对话框仅创建一次。

这将创建一个单例对话框，因此您需要将回调作为参数传入，无论是在main 函数中还是作为设置，然后在模态回调函数中调用它：

!alertify.customModal && alertify.dialog('customModal', function factory() {
  var placeholder = null
  return {
    main: function (content, callback) {
    ....
    //sets callback
    this.set('callback', callback);
  },
  settings: {
    ....,
    callback:undefined //holds callback ref
  },
  callback: function (closeEvent) {
    //invokes callback if set
    var cb = this.get('callback')
    if (typeof cb === 'function') {
      var returnValue = cb.call(this, closeEvent);
      if (typeof returnValue !== 'undefined') {
        closeEvent.cancel = !returnValue;
      }
    }
  }
});

然后，调用您的自定义模式：

function showDialog(title, formDialog, callbackfunction, params) {
  alertify.customModal($(formDialog)[0], callbackfunction)
          .set('title', title); //pass callback function here
}

为了便于阅读，我只包括了相关部分。

如需完整示例，请查看内置对话框实现：Alert、Confirm 和 Prompt。