Okno potwierdzenia jquery

Question

Szukam utworzyć ogólne pole potwierdzenia, które może być łatwo używane przez wiele widgetów, ale mam problemy z zasięgiem i miałem nadzieję na lepszy sposób robienia tego, co próbuję zrobić .

Obecnie mam następujący -

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

Obecnie jestem po prostu chcą zrobić coś tak prostego jak zamknąć okno od wewnątrz widget, ale myślę, że zawinięte mój własny mózg w kręgach pod względem tego, co wie co. Ktoś chce pomóc oczyścić mój oszołomiony mózg?

Cheers, Sam

Otrzymany kod:

Pomyślałem, że może to być przydatne dla ludzi, którzy znaleźli ten wątek w późniejszych dniach szuka rozwiązania podobnego problemu, aby zobaczyć kod wynikało z pomocnych odpowiedzi, które tu otrzymałem.

Jak się okazało, w końcu było dość prosto (jak większość frustrujących splotów umysłu).

/** 
* 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

Można przekazać jqContainer do funkcji potwierdzania/anulowania.

Możesz też przypisać jqContainer jako właściwość osoby dzwoniącej. Ponieważ funkcje potwierdzania/anulowania są wywoływane jako metody dzwoniącego, będą miały do ​​niego dostęp poprzez this. Ale to ogranicza śledzenie jednego okna dialogowego na widget.

Answer 2

Spróbuj czegoś takiego:

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

Jeśli to nie zadziała, spróbuj definiowania wywołania zwrotne (confirm_action, cancel_action) jako prywatne członkowie obiektu. Ale powinni mieć możliwość uzyskania dostępu do zewnętrznego zakresu głównego obiektu.