我正在用Dojo编写一个简单的表单。这是我在实际做某事方面对Dojo的第一次“真实”使用...... 基本上：
1）当显示小部件时，onShow会尝试预加载表单应具有的值 2）当用户提交时，使用相同的商店保存值
这里的“问题”是我试图制作1000％的故障安全应用程序。例如，如果商店不起作用（因此无法检索设置），我希望应用程序在3秒后再次尝试 - 或者，当用户点击链接时。 所以，我现在正在做的是将所有“提取”功能放入一个函数loadUp（）中。如果有问题，我将再次运行loadUp（）（来自promise中的错误回调）我还应该禁用表单 - 比如将其变为灰色，现在允许输入）。
所以，问题：
1）这是一种理智的做事方式吗？ 2）你怎么去，关于灰色表格？
我意识到我在这里谈论的是Workspace设置。那么，真正发生的是“get”将在整个过程的最开始时完成。但是，我将重复使用它几乎每种形式...
以下是代码：
var SettingsGeneral = declare('hotplate.bd.SettingsGeneral', [ ContentPane, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
templateString: '' +
'<div>' +
' <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form" method="POST"> ' +
' <input id="${id}_WorkspaceLongName" data-dojo-type="dijit/form/ValidationTextBox" name="longName" data-dojo-props="" />' +
' <input id="${id}_WorkspaceTag" data-dojo-type="dijit/form/ValidationTextBox" name="tag" data-dojo-props="" />' +
' <input class="formSubmit" type="submit" data-dojo-attach-point="button" data-dojo-type="hotplate.hotDojoWidgets.BusyButton" label="Create!" />' +
' </form>' +
'</div>',
onShow: function(){
this.inherited(arguments);
// This returns a working store
var workspaceSettings = stores('workspaceSettings', { workspaceIdCall: vars['hotDojoAppContainer']['workspaceId'] } );
function loadUp(){
// The server will return the settings for this particular workspace
workspaceSettings.get('').then(
function(res){
// All good...
// Assign all of the received values to matching fields
// TODO: Turn this into a function
that.form._descendants.forEach(function( widget ) {
console.log(widget);
if( typeof( res.data[ widget.name ] ) !== 'undefined'){
widget.set('value', res.data[ widget.name] );
}
});
},
function(err){
// Error: try this again in 3 seconds, hopefully it will work. It would actually be better having a
// link to click for the user
console.log("Something went wrong. The form needs to be disabled (turned grey?) and the connection should be retried");
setTimeout(loadUp, 3000);
}
);
};
loadUp();
// Submit form
this.form.onSubmit = ds.defaultSubmit(this.form, this.button, function(){
console.log("PRESSED!");
that.button.cancel();
console.log(workspaceSettings);
// Use the same data store to save the settings...
});
}
});
答案 0 :(得分：0)
这是我做的：
第1步：我在课堂上添加了一个mixin：_OverlayMixin，并设置onOverlayClick以重新显示小部件。调用this.set( 'overlayed', true ); this.set( 'overlayClickable', false );后，我也会运行show()，然后that.set( 'overlayed', false );（如果工作正常）或that.set('overlayClickable', true ); （如果事情不顺利）。
第2步：实际上写了_OverlayMixin类
代码如下。 _OverlayMixin类非常简单，独立。它需要美化 - 现在它只是一个灰色的小部件。如果叠加层是可点击的，则它将设置一个类 - 因此它可能有一个用于重试的图标。我喜欢我所做的，因为它非常有道理，而且阅读起来非常简单。此外，这种方式可以重新启动小部件＆＃34;如果出现问题，很容易被用户使用。
以下是代码......从我的简单小部件开始：
var SettingsGeneral = declare('hotplate.bd.SettingsGeneral', [ ContentPane, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _OverlayMixin ], {
templateString: '' +
'<div>' +
' <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form" method="POST"> ' +
' <input id="${id}_WorkspaceLongName" data-dojo-type="dijit/form/ValidationTextBox" name="longName" data-dojo-props="" />' +
' <input id="${id}_WorkspaceTag" data-dojo-type="dijit/form/ValidationTextBox" name="tag" data-dojo-props="" />' +
' <input class="formSubmit" type="submit" data-dojo-attach-point="button" data-dojo-type="hotplate.hotDojoWidgets.BusyButton" label="Create!" />' +
' </form>' +
'</div>',
onOverlayClick: function(){
this.onShow();
},
onShow: function(){
var that = this;
// By default, this widget is overlayed
this.set( 'overlayed', true );
this.set( 'overlayClickable', false );
var workspaceSettings = stores('workspaceSettings', { workspaceIdCall: vars['hotDojoAppContainer']['workspaceId'] } );
workspaceSettings.get('').then(
function(res){
// OK things worked out: the overlay can go
that.set( 'overlayed', false );
// Assign all of the received values to matching fields
// TODO: Turn this into a function
that.form._descendants.forEach(function( widget ) {
console.log(widget);
if( typeof( res.data[ widget.name ] ) !== 'undefined'){
widget.set('value', res.data[ widget.name] );
}
});
},
function(err){
that.set('overlayClickable', true );
}
);
},
mixin：
define([
"dojo/_base/declare",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-attr",
"dojo/dom-class",
], function(
declare
, on
, dom
, domConstruct
, domAttr
, domClass
){
return declare( null, {
overlayed: false,
overlayClickable: false,
postCreate: function(){
var that = this;
this.inherited(arguments);
// Create the overlay widget, place it as first in the widget
var overlay = domConstruct.create('div', {
className: 'overlay',
style: {
'position': 'absolute',
'top': 0,
'bottom': 0,
'left': 0,
'right': 0,
'z-index': 99,
'display': 'none',
'background': 'rgba(0,0,0,0.32)'
}
} );
domConstruct.place(overlay, this.domNode, 'first');
// Set the overlayNode attribute of the widget
this.overlayNode = overlay;
// Wire the click of the mouse to the object's "onOverlayClick"
on( this.overlayNode, 'click', function(e){
if( that.overlayClickable && typeof( that.onOverlayClick ) === 'function' ) {
that.onOverlayClick(e);
}
});
},
// Set the widget as "overlayed" or
_setOverlayedAttr: function( value ){
this._set('overlayed', value);
if( value ){
domAttr.set( this.overlayNode, { style: { display: 'block'} } );
} else {
domAttr.set( this.overlayNode, { style: { display: 'none'} } );
}
},
_getOverlayedAttr: function(){
return this.overlayVisible;
},
// Set the widget as clickable or not
_setOverlayClickableAttr: function(value){
console.log("Set to clickableeeeeeeeeeeeeeeeeeeeeeeeeeeeee!");
this._set('overlayClickable', !! value);
if( value ){
console.log("1");
domClass.add( this.overlayNode, 'overlayClickable' );
} else {
console.log("2");
domClass.remove( this.overlayNode, 'overlayClickable' );
}
},
_getOverlayClickableAttr: function(){
return this.overlayClickableAttr;
}
});
});