0

我正在用 Dojo 编写一个简单的表单。这是我在实际做某事方面对 Dojo 的第一次“真正”使用......基本上：

1）当显示小部件时，onShow，它会尝试预加载表单应具有的值 2）当用户提交时，使用相同的存储保存值

这里的“问题”是我正在尝试制作一个 1000% 的故障安全应用程序。例如，如果商店不工作（因此无法检索设置），我希望应用程序在 3 秒后重试 - 或者，当用户单击链接时。所以，我现在正在做的是将所有“获取”功能放入一个函数 loadUp() 中。如果有问题，我将再次运行 loadUp()（从 promise 中的错误回调）并且我还应该禁用表单——比如将其变为灰色，现在允许输入）。

所以，问题：

1）这是一种理智的做事方式吗？2）你会怎么做，关于灰色的表格？

我意识到我在这里谈论的是工作区设置。所以，真正会发生的是“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... 

  }); 
} 
});
4

1 回答 1

0

这是我所做的：

第 1 步：我在我的类中添加了一个 mixin：，_OverlayMixin并设置onOverlayClick为重新显示小部件。我也会在被调用时this.set( 'overlayed', true ); this.set( 'overlayClickable', false );立即运行show()，然后 that.set( 'overlayed', false );（如果一切正常）或 that.set('overlayClickable', true ); （如果事情不顺利）。

STEP 2：实际编写了 _OverlayMixin 类

代码如下。这个_OverlayMixin类真的很简单，自成一体。它需要美化——现在它只是小部件上的一个灰色东西。如果覆盖是可点击的，它将有一个类集——所以它可能有一个重试图标。我喜欢我所做的，因为它非常像道场，而且阅读起来非常简单。此外，如果出现问题，用户可以通过这种方式轻松“重新启动”小部件。

这是代码......从我的简单小部件开始：

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

},

混音：

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



});  
});
于 2012-12-07T05:48:53.463 回答