مربع تأكيد 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.ولكن هذا يحدك من تتبع مربع حوار واحد لكل عنصر واجهة مستخدم.

Answer 2

جرب شيئًا مثل هذا:

(function() {

    var global = this;
    /*****************This is new****************/
    var jqContainer;


    global.confirmationBox = function() {
    config = {
        container: '<div>',
        message:''
    }
    return {
        config: config,
        render: function(caller) { 

            // store the container in the outer objects scope instead!!!!
            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

            /*******Hopefully, you would have access to jqContainer here now *****/

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

إذا لم ينجح ذلك، فحاول تحديد عمليات الاسترجاعات (confirm_action، Cancel_action) كأعضاء خاصين في كائنك.لكن يجب أن يكونوا قادرين على الوصول إلى النطاق الخارجي لكائنك الرئيسي.