[解決済み] 確認ボタン付き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回聞くより1回見た方が良いので、以下のコードは全てjsFiddleでライブでご覧ください。 http://jsfiddle.net/phusick/wkydY/

私が採用している大原則は、以下の事実です。 dijit.Dialog::content は、文字列だけでなく、ウィジェットのインスタンスである可能性もあります。そこで、私は dijit.Dialog を宣言するために ConfirmDialog クラスを作成します。で ConfirmDialog::constuctor() テンプレートからウィジェットを宣言してインスタンス化し、それをダイアログのコンテンツに設定しています。そして onClick アクションを ConfirmDialog::postCreate() メソッドを使用します。

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 を頻繁に、そしてコードの複数の場所で使用する場合は、この点を考慮してください。

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