Jquery确认框

Question

我正在寻找创建一个可以被多个小部件轻松使用的通用确认框,但是我遇到了范围问题,并且希望有更清晰的方式来做我正在尝试做的事情.

目前我有以下 -

(function() {

    var global = this;
    global.confirmationBox = function() {
    config = {
        container: '<div>',
        message:''
    }
    return {
        config: config,
        render: function(caller) {
            var jqContainer = $(config.container);
            jqContainer.append(config.message);
            jqContainer.dialog({
                buttons: {
                    'Confirm': caller.confirm_action,
                     Cancel: caller.cancel_action
                }
            });
        }
    }
} //end confirmationBox
global.testWidget = function() {
    return {
        create_message: function(msg) {
            var msg = confirmationBox();
            msg.message = msg;
            msg.render(this);
        },
        confirm_action: function() {
            //Do approved actions here and close the confirmation box
            //Currently not sure how to get the confirmation box at
            //this point
        },
        cancel_action: function() {
            //Close the confirmation box and register that action was 
            //cancelled with the widget. Like above, not sure how to get
            //the confirmation box  back to close it
        }
    }
}//end testWidget
})();
//Create the widget and pop up a test message
var widget = testWidget();
widget.create_message('You need to confirm this action to continue');

目前我只是想做一些简单的事情,比如从小部件内部关闭框,但我认为我已经把自己的大脑包裹在了解什么的方面.有人想帮助清除我迷茫的大脑吗？

干杯,山姆

结果代码:

我认为对于那些在以后找到这个线程的人来说寻找类似问题的解决方案以查看我在这里得到的有用答案所产生的代码可能会有用.

事实证明它最终很简单(因为大多数令人沮丧的心灵缠结).

 /**
 * Confirmation boxes are used to confirm a request by a user such as
 * wanting to delete an item
 */
 global.confirmationBox = function() {
    self = this;
    config = {
        container: '<div>',
        message: '', 
    }
    return {
        set_config:config,
        render_message: function(caller) {
            var jqContainer = $(config.container);
            jqContainer.attr('id', 'confirmation-dialog');
            jqContainer.append(config.message);
            jqContainer.dialog({
               buttons: {
                   'Confirm': function() {
                       caller.confirm_action(this);
                    },
                   Cancel: function() {
                       caller.cancel_action(this);
                   }
               }
           });
        }
    }
 } // end confirmationBox

 global.testWidget = function() {
    return {
        create_message: function(msg) {
            var msg = confirmationBox();
            msg.message = msg;
            msg.render(this);
        },
        confirm_action: function(box) {
            alert('Success');
            $(box).dialog('close'); 
        },
        cancel_action: function(box) {
            alert('Cancelled');
            $(box).dialog('close'); 
        }
    }
}//end testWidget

Answer 1

您可以将 jqContainer 传递给确认/取消函数。

或者，将 jqContainer 指定为调用者的属性。由于确认/取消函数是作为调用者的方法调用的，因此他们可以通过this. 但这限制了您只能跟踪每个小部件一个对话框。