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

그래도 작동하지 않으면 콜백 (확인_Action, cancel_Action)을 객체의 개인 구성원으로 정의하십시오. 그러나 그들은 주 객체의 외부 범위에 액세스 할 수 있어야합니다.