Dojo –Dialog在组件中传值

发布时间：2020-12-16 21:45:35 所属栏目：百科来源：网络整理

导读：Dialog是所有开发人员都会使用到的一个对话框,由于它的常用性,很多开发平台都对其进行了封装,通过MessageBox或者Alert就能弹出来.再捕获commandOk中的值，来执行相应的事件.没错，Dialog就是这么简单，Dojo中的Dialog是否也是如此的简单呢？下面我们就以我新

　　Dialog是所有开发人员都会使用到的一个对话框,由于它的常用性,很多开发平台都对其进行了封装,通过MessageBox或者Alert就能弹出来.再捕获commandOk中的值，来执行相应的事件.没错，Dialog就是这么简单，Dojo中的Dialog是否也是如此的简单呢？下面我们就以我新近做的Dialog为例进行说明.

　　下面，我们先看现象：单击“保存为搜索模板”，弹出“保存搜索条件”对话框.

　　由于“保存为搜索模板”为动态创建的，这里我就不再将此部分的页面代码Show出来，单击“保存为搜索模板”，触发“onSave()”事件，如下：

onSave : function(event){

this.logger.debug("onSave");

this._saveSearchCondition(event.payload);

}

　　为了实现代码的重用性，及降低代码的耦合性，在onSave中调用this._saveSearchCondition(event.payload)方法，选用this.method方法，是避免Form中会有多个_saveSearchConditon()方法混淆使用，this限制了方法的作用域为当前的widget.

_saveSearchCondition: function(payload){

this.logger.debug("_saveSearchCondition");

var generalCallback =function(result) {

this.logger.debug("Success");

console.dir(['data',result ]);

};

var cancelCallback =function() {

this.logger.debug("cancelCallback");

};

ecmwdgt.getBean("saveSearchConditionDialog",{

model : ecmwdgt.getBean("searchTemplateModel"),

payload : payload,

callbacks:{

"ok":dojo.hitch(this,generalCallback),

"cancel": dojo.hitch(this,cancelCallback)

}

}).show();

}

　　注解：ecmwdgt.getBean().show()是加载了需要显示的Dialog，此Dialog对应的是创建该Dialog（saveSearchConditonDialog）的js文件，由json数据进行绑定.然后由saveSearchConditonDialog.js加载saveSearchConditonDialog.html文件.

　　model :ecmwdgt.getBean("searchTemplateModel")，有两个作用，一个是对service中的数据持久化，另一方面就是页面中暂存数据.如下为searchTemplateModel.js文件：

save : function(/*Object*/ postPayLoad,/* Function */callback,/* Function */errorback) {

this._invokeService("saveSearchCondition",postPayLoad,callback,errorback);

}

　　callbacks:分别对应Dialog页面“是”和 “否”的返回值，当我们操作成功，就会从前台界面返回成功，就会执行generalCallback()方法，注意这里的方法并不是Dialog时间执行的方法，而是事件执行成功之后，返回的方法.

　　在上面的方法执行完之后，就会加载saveSearchConditionDialog.js文件，创建Dialog，加载saveSearchConditionDialog.html，在页面中显示出来.下面是saveSearchConditionDialog.js与saveSearchConditionDialog.html的关键源码.

dojo.require("com.ibm.ecm.nuclear.common.dialog.dijit._CommandDialog");

dojo.require("dojo.string");

dojo.declare("com.ibm.ecm.nuclear.common.dialog.SaveSearchConditionDialog",[com.ibm.ecm.nuclear.common.dialog.dijit._CommandDialog],{

templateString:dojo.cache("com.ibm.ecm.nuclear.common.dialog","templates/SaveSearchConditionDialog.html"),

widgetsInTemplate : true,

title : null,

preamble:function(args){

// this.bundle = args.bundle || ecmwdgt.getCommandResourceBundle("SaveSearchConditionDialog");

this.resourceBundle = ecmwdgt.getCommandResourceBundle("SaveSearchConditionDialog");

constructor: function(args){

this.title = args.title ||this.resourceBundle.dialogTitle;

dojo.mixin(args,

{

buttons:[

{ name:"ok",label:this._commonResourceBundle.YES},

{ name:"cancel",label:this._commonResourceBundle.NO}

commandsCallback:{

ok:dojo.hitch(this,this._onSaveSearchCondition),

cancel:dojo.hitch(this,this._onCancel)

}

);

postCreate: function() {

this.inherited(arguments);

var searchTitle =null;

searchTitle = this.inputBox.get("value");

console.dir(["this",this]);

_onSaveSearchCondition:function(){

this.logger.debug("common.dialog.SaveSearchConditionDialog._onSaveSearchCondition");

console.dir(["_onSaveSearchCondition this",this,this.model,this.payload]);

var searchTitle =this.inputBox.get("value");

if(this.model &&this.payload && searchTitle){

this.logger.debug("Model Exists!");

this.payload.searchTemplateName = searchTitle;

this.model.save(this.payload,dojo.hitch(this,function(result) {

return this._execute("ok");

}),function(err) {

this.onCancel();

this._showErrorMessage(err);

return err;

}));

}

//return searchTitle;

_execute: function(name) {

if (this.callbacks &&this.callbacks[name])

return this.callbacks[name](this.inputBox.get("value"),this);

_onCancel: function(){

this.logger.debug("_onCancel");

console.dir(["this",this]);

this._execute("cancel");

destroy: function(){

this.inherited(arguments);

_eoc_: null

});

　　注解：刚才在上面callbacks进行了详细的解释，在这里_execute()方法将title方法返回给后台（并非是真正的后台），在contentList页面中取得返回值,这一步是取得返回值的关键.

Constructor为当前类的构造函数，它与我们平时创建的构造函数一样，只不过我们在这里构造了两个绑定值的Button使用.

saveSearchConditionDialog.html

<span data-dojo-attach-point="titleNode" class="dijitDialogTitle"

id="${id}_title">${title}</span>

<span

data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon"

data-dojo-attach-event="onclick:onCancel"

data-dojo-props='id:"${id}_closeButton",title:"${_commonResourceBundle.Close}"'>

</span>

</div>

</div>

</div>

　　注：此部分的Dialog实现方式与本系统所需的架构有关，在一般的Dialog中直接在其对应的页面中响应数据，操作比较简单。本文谨为自己学习使用，初学者请勿随意模仿，以免进入学习的误区。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!