Javascript 带有确认按钮的Dojo对话框

我想添加一个带有“Ok”和“Cancel”按钮的通用对话框来支持回调函数

如何使用Dojo AMD实现这一点

例如：

  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() }
   }

---

这是我在面对同样问题时提出的解决方案。它不是完全编程的，但是使用模板可以使代码更可读，更灵活地进行更改

看一次总比听100次好，所以请在JSFIDLE现场查看以下所有代码：

我采用的主要原则是，

dijit.Dialog:：content

不仅可以是字符串，还可以是小部件实例。因此，我将dijit.Dialog子类化，以声明

ConfirmDialog

类。在

ConfirmDialog:：constructor（）

中，我从模板声明并实例化一个小部件，并将其设置为dialog的内容。然后我在

ConfirmDialog:：postCreate（）

方法中连接

onClick

操作：

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>

重要提示：关闭对话框时，不要忘记断开与对话框回调和销毁对话框的任何连接

如果您经常使用代码> >确认对话框> /代码>，在代码的多个地方考虑如下：

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

---

Dojo 1.10包含了一个新的内置OK和Cancel按钮。

下面介绍如何使用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();
});

---

Dojo确认对话框非常简单且有用

---

第一个dojo小部件和内部小部件工作示例我发现工作！非常感谢：）。我发现官方文件在这个问题上太差了。官方文件在大多数情况下都很差；）您还可以将

onExecute

属性添加到构造函数中包含事件处理函数的option对象中，而不是事后注册事件。这应该是第一个答案。如果您需要阻止行为，请查看我的

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

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