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）作为对象的私有成员。但他们应该能够访问主要对象的外部范围。