「OK」ボタンと「キャンセル」ボタンがコールバック関数をサポートする一般的なダイアログを追加したいと思います。
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()
で、テンプレートからウィジェットを宣言してインスタンス化し、ダイアログのコンテンツとして設定します。次に、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>
_
_dijit.Dialog
_の代わりにConfirmDialog
を使用します。
_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")
});
_
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 1.10には、[OK]ボタンと[キャンセル]ボタンが組み込まれた新しい dijit/ConfirmTooltipDialog が含まれています。
Dojo確認ダイアログは非常にシンプルで便利です。
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.
}
});
});