Dojo对话框与确认按钮 [英] Dojo Dialog with confirmation button
问题描述
我想通过Ok和Cancel按钮添加一个通用对话框来支持回调函数。
如何用Dojo AMD实现这一点？ / p>
例如：
myDialog = new Dialog（{
标题：我的对话框，
内容：你确定要删除所选的记录吗？，
style：width：300px，
onExecute ：function（）{//回调函数
console.log（Record Deleted）
}，
onCancel：function（）{
console.log（Event Cancelled ）}
}）;
//创建一个按钮来清除购物车
new Button（{label：Ok
onClick：myDialog.onExecute（）
}
new Button（{label：Cancel
onClick：function（）{myDialog.onCancel（）}
}
这是我遇到同样问题时提出的解决方案，它不完全是程序化的，但使用模板可以使代码更易读，更好地查看一次，而不是听到100次，所以看到下面的所有代码都在jsFiddle中： http://jsfiddle.net/phusick/wkydY/
我采用的主要原则是 dijit.Dialog :: content 不仅可以是字符串，还可以是一个小部件实例，所以我将 dijit.Dialog 声明 ConfirmDialog 类在 ConfirmDialog :: constuctor（）我声明并实例化一个小部件一个模板，并将其设置为对话框的内容。然后我在 ConfirmDialog :: postCreate（）方法中<？c $ c> onClick 操作：
var ConfirmDialog = declare（Dialog，{
title：Confirm，
message：Are you sure？，
构造函数：function（/ * Object * / kwArgs）{
lang.mixin（this，kwArgs）;
var message = this.message;
var contentWidget = new（declare（[_ Widget，_TemplatedMixin，_WidgetsInTemplateMixin]，{
templateString：template，//通过dojo加载器获取模板
message：message
} ））;
contentWidget.startup（）;
this.content = contentWidget;
}，
postCreate：function（）{
this.inherited （参数）;
this.connect（this.content.cancelButton，onClick，onCancel）;
}
}）
模板标记：
; div style =width：300px;&g吨;
< 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 =提交
>
OK
< / button>
< button
data-dojo-type =dijit.form.Button
data-dojo-attach-point =cancelButton
>
取消
< / button>
< / div>
< / div>
现在使用 ConfirmDialog 而不是 dijit.Dialog ：
var confirmDialog = new ConfirmDialog（{message：您的留言......}）;
confirmDialog.show（）;
重要提示：不要忘记断开与对话框回调和关闭时销毁对话框
如果您经常使用 ConfirmDialog ，并在代码的多个地方考虑： p>
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（）;
}）;
删除信号;
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（）;
返回延期;
}
您的代码将更加可读，您无需处理清理：
MessageBox.confirm（）。then（function（）{
console.log（MessageBox.OK ）
}）;
I would like to add a generic dialog with "Ok" and "Cancel" buttons support callback functions.
How can I achieve this with a Dojo AMD?
For example:
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() }
}
Here is the solution I came up when I had been facing the same question. It's not completely programmatic, but using the template makes the code more readable and flexible for changes.
Better to see once than to hear 100 times, so see all the code below live at jsFiddle: http://jsfiddle.net/phusick/wkydY/
The main principle I employ is the fact that dijit.Dialog::content may not only be a string, but also a widget instance. So I subclass dijit.Dialog to declare ConfirmDialog class. In ConfirmDialog::constuctor() I declare and instantize a widget from a template and set it to be dialog's content. Then I wire onClick actions in ConfirmDialog::postCreate() method:
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");
}
})
The template markup:
<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>
Now use ConfirmDialog instead of dijit.Dialog:
var confirmDialog = new ConfirmDialog({ message: "Your message..."});
confirmDialog.show();
Important: Do not forget to disconnect any connects to the dialogs callbacks and destroy dialog when closed.
If you use ConfirmDialog often and in multiple places of your code consider this:
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;
}
Your code will be more readable and you will not have to deal with cleaning up:
MessageBox.confirm().then(function() {
console.log("MessageBox.OK")
});
这篇关于Dojo对话框与确认按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
