Hộp thoại Dojo với nút xác nhận

Question

Tôi muốn thêm một hộp thoại chung với các nút "Ok" và "Hủy" hỗ trợ chức năng gọi lại.

Làm thế nào tôi có thể đạt được điều này với Dojo AMD?

Ví dụ:

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

Đây là giải pháp tôi đến khi tôi đã phải đối mặt với cùng một câu hỏi. Nó không hoàn toàn có lập trình, nhưng việc sử dụng mẫu làm cho mã dễ đọc hơn và linh hoạt hơn cho các thay đổi.

Better để xem một lần hơn là nghe 100 lần, vì vậy nhìn thấy tất cả các mã dưới đây sống ở jsFiddle: http://jsfiddle.net/phusick/wkydY/

Nguyên tắc chính tôi sử dụng là một thực tế rằng dijit.Dialog::content có thể không chỉ là một chuỗi, mà còn là một phụ tùng ví dụ. Vì vậy, tôi phân lớp dijit.Dialog để khai báo lớp ConfirmDialog. Trong ConfirmDialog::constuctor() Tôi khai báo và khởi tạo một widget từ một mẫu và đặt nó thành nội dung của hộp thoại. Sau đó, tôi dây onClick hành động trong ConfirmDialog::postCreate() phương pháp:

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"); 
    } 

}) 

Các đánh dấu mẫu:

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

Bây giờ sử dụng ConfirmDialog thay vì dijit.Dialog:

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

Chú ý: Đừng quên để ngắt kết nối bất kỳ kết nối nào với hộp thoại gọi lại và hủy hộp thoại w hen đóng cửa.

Nếu bạn sử dụng ConfirmDialog thường xuyên và ở nhiều nơi của mã của bạn xem xét việc này:

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; 
} 

Mã của bạn sẽ dễ đọc hơn và bạn sẽ không phải đối phó với dọn dẹp:

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

Answer 2

Dojo 1.10 bao gồm dijit/ConfirmTooltipDialog mới với các nút OK và Hủy được tích hợp sẵn.

Answer 3

Đây là cách sử dụng dijit/ConfirmDialog và định cấu hình các nút của nó.

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

Hộp thoại xác nhận dojo rất đơn giản và hữu ích.
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. 
     } 
    }); 
});