पुष्टिकरण बटन

Question

के साथ दोजो संवाद मैं "ठीक" और "रद्द करें" बटन के साथ एक सामान्य संवाद जोड़ना चाहता हूं कॉलबैक फ़ंक्शंस का समर्थन करता हूं।

मैं इसे दोजो एएमडी के साथ कैसे प्राप्त कर सकता हूं?

उदाहरण के लिए:

myDialog = new Dialog ({ 

    title: "My Dialog", 
    content: "Are you sure, you want to delete the selected Record?", 
    style: "width: 300px", 
    onExecute:function(){ //Callback function 
     console.log("Record Deleted") 
    }, 
    onCancel:function(){ 
     console.log("Event Cancelled") } 
    }); 
    // create a button to clear the cart 
    new Button({ label:"Ok" 
     onClick: myDialog.onExecute() 
    } 

    new Button({ label:"Cancel" 
     onClick: function(){ myDialog.onCancel() } 
    } 

Answer 1

यहाँ समाधान मैं आया था जब मैं एक ही सवाल का सामना करना पड़ गया था। यह पूरी तरह से प्रोग्रामेटिक नहीं है, लेकिन टेम्पलेट का उपयोग कोड को और अधिक पठनीय और परिवर्तनों के लिए लचीला बनाता है।

बेहतर एक बार देखने के 100 बार सुनने के लिए की तुलना में, तो नीचे दिए गए jsFiddle में रहते हैं सभी कोड को देखने के लिए: http://jsfiddle.net/phusick/wkydY/

मुख्य सिद्धांत मैं रोजगार तथ्य यह है कि dijit.Dialog::content केवल एक स्ट्रिंग, लेकिन यह भी एक विजेट नहीं हो सकता है उदाहरण। तो ConfirmDialog कक्षा घोषित करने के लिए मैं dijit.Dialog subclass। ConfirmDialog::constuctor() में मैं एक टेम्पलेट से विजेट को घोषित और त्वरित करता हूं और इसे संवाद की सामग्री के रूप में सेट करता हूं।

var ConfirmDialog = declare(Dialog, { 

    title: "Confirm", 
    message: "Are you sure?", 

    constructor: function(/*Object*/ kwArgs) { 
     lang.mixin(this, kwArgs); 

     var message = this.message; 

     var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { 
      templateString: template, //get template via dojo loader or so 
      message: message  
     })); 
     contentWidget.startup(); 
     this.content = contentWidget; 
    }, 

    postCreate: function() { 
     this.inherited(arguments); 
     this.connect(this.content.cancelButton, "onClick", "onCancel"); 
    } 

}) 

टेम्पलेट मार्कअप:

<div style="width:300px;"> 

    <div class="dijitDialogPaneContentArea"> 
    <div data-dojo-attach-point="contentNode"> 
     ${message}    
    </div> 
    </div> 

    <div class="dijitDialogPaneActionBar"> 

    <button 
     data-dojo-type="dijit.form.Button" 
     data-dojo-attach-point="submitButton" 
     type="submit" 
    > 
     OK 
    </button> 

    <button 
     data-dojo-type="dijit.form.Button" 
     data-dojo-attach-point="cancelButton" 
    > 
     Cancel 
    </button> 

    </div> 

</div> 

अब ConfirmDialog बजाय dijit.Dialog का उपयोग करें:

var confirmDialog = new ConfirmDialog({ message: "Your message..."}); 
confirmDialog.show(); 

महत्वपूर्ण: मत भूलना डिस्कनेक्ट करने के लिए तो मैं ConfirmDialog::postCreate() विधि में onClick कार्यों तार कोई भी संवाद कॉलबैक से जुड़ता है और संवाद डब्ल्यू को नष्ट करता है मुर्गी बंद

आप और आपके कोड के अनेक स्थानों में अक्सर ConfirmDialog का उपयोग करते हैं इस पर विचार करें:

var MessageBox = {}; 
MessageBox.confirm = function(kwArgs) { 
    var confirmDialog = new ConfirmDialog(kwArgs); 
    confirmDialog.startup(); 

    var deferred = new Deferred(); 
    var signal, signals = []; 

    var destroyDialog = function() { 
     array.forEach(signals, function(signal) { 
      signal.remove(); 
     }); 
     delete signals; 
     confirmDialog.destroyRecursive(); 
    } 

    signal = aspect.after(confirmDialog, "onExecute", function() { 
     destroyDialog(); 
     deferred.resolve('MessageBox.OK'); 
    }); 
    signals.push(signal); 

    signal = aspect.after(confirmDialog, "onCancel", function() { 
     destroyDialog(); 
     deferred.reject('MessageBox.Cancel');    
    }); 
    signals.push(signal); 

    confirmDialog.show(); 
    return deferred; 
} 

आपका कोड अधिक पठनीय होगा और आप को साफ करने के साथ सौदा करने के लिए नहीं होगा:

MessageBox.confirm().then(function() { 
    console.log("MessageBox.OK") 
}); 

Answer 2

Dojo 1.10 में एक नया dijit/ConfirmTooltipDialog अंतर्निहित ठीक है और रद्द करें बटन शामिल हैं।

Answer 3

यहां dijit/ConfirmDialog का उपयोग करने और इसके बटन कॉन्फ़िगर करने का तरीका बताया गया है।

require(["dijit/ConfirmDialog"], function(ConfirmDialog){ 

    // create instance 
    var dialog = new ConfirmDialog({ 
     title: "Session Expiration", 
     content: "the test. Your session is about to expire. Do you want to continue?", 
     style: "width: 300px" 
    }); 

    // change button labels 
    dialog.set("buttonOk","Yes"); 
    dialog.set("buttonCancel","No"); 

    // register events 
    dialog.on('execute', function() { /*do something*/ }); 
    dialog.on('cancel', function() { /*do something*/ }); 

    // show 
    dialog.show(); 
}); 

Answer 4

डोजो की पुष्टि करें संवाद बहुत ही सरल और उपयोगी है।
http://dojotoolkit.org/reference-guide/1.10/dijit/ConfirmDialog.html

require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){ 
    myDialog = new ConfirmDialog({ 
     title: "My ConfirmDialog", 
     content: "Test content.", 
     buttonCancel: "Label of cancel button", 
     buttonOk: "Label of OK button", 
     style: "width: 300px", 
     onCancel: function(){ 
      //Called when user has pressed the Dialog's cancel button, to notify container. 
     }, 
     onExecute: function(){ 
      //Called when user has pressed the dialog's OK button, to notify container. 
     } 
    }); 
});