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を経由してそれにアクセスする必要があります。しかし、それはウィジェットごとに1つのダイアログを追跡にあなたを制限します。

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）を定義してみてください。しかし、彼らはあなたの主要な目的の外側のスコープにアクセスできるようにする必要があります。