1

也许我走错了路...

设置： 我有一个相当复杂的完整的 dojofied Web 应用程序。这个问题的重要部分是在 a 的中心区域有一个较长的表格，dijit.layout.BorderContainer带有导航树和其他区域的一些操作按钮。

我想要做什么： 如果用户确实输入了数据并且没有保存，如果他要离开表单，他们应该会收到一条警告消息（如果他离开，点击“新元素”按钮，......）。为了获得更好的用户体验，我想提供一个带有“保存”、“无论如何离开”、“取消”选项的模式对话框。可能的想法是使用表单的 onBlur 事件，停止所有其他事件（很可能是某个其他小部件上的 onClick），检查更改，如果有更改，则显示对话框，否则让其他事件继续。我不想为所有非表单活动元素添加 checkChanges 方法！

对于第一次测试，我只是试图阻止这些事件......

这有效

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" >
      alert("I don't think so");
    </script>
 </div>

...但它很丑，我不能轻易继续

这不

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" args="e">
      console.log("blur"); // ok
      e.preventDefault();//event.stopt(e)//return false //<--neither of these
    </script>
 </div>

问题是，如果我单击表单外部的按钮，则会onBlur触发，但我无法停止onClick按钮上的按钮。我知道这onBlur不会提供事件对象 - 所以e.something不能真正工作......有没有办法捕捉onClick另一个元素？

4

2 回答 2

2

onBlur如果未保存数据，则暂停表单中的按钮事件侦听器。

看看它在行动：http: //jsfiddle.net/phusick/A5DHf/

你有一些按钮事件监听器，通过on.pausable(node, event, callback)而不是注册它们on()：

var b1Handler = on.pausable(button1Node, "click", function() {
    console.log("b1.onClick");        
});

var b2Handler = on.pausable(button2Node, "click", function() {
    console.log("b2.onClick");        
});

将处理程序收集到一个数组中：

var handlersToPause = [b1Handler, b2Handler];

添加onBlur事件监听器：

on(form, "blur", function(e) {

    if (this.isDirty()) {
        // if data are not saved, pause button event listeners
        handlersToPause.forEach(function(handler) {
            handler.pause();
        });
        // display modal dialog here     
    }            
});

添加例如onFocus事件侦听器以恢复按钮事件侦听器：

on(form, "focus", function(e) {
    handlersToPause.forEach(function(handler) {
        handler.resume();            
    });
});

请注意，这handler.pause()是暂停onclick侦听器，而不是事件。该onclick事件在 中等待，Event queue因此在 的执行时间内无法访问onblur。

我会制定一些更强大的解决方案，但这很快就能回答你的问题。无论如何，看看dojo/aspect它的around建议来调用您的checkChanges而无需更改所有非表单活动元素。

于 2012-06-05T12:32:51.310 回答
1

只有 afaikconfirm('question?')会像那样“死锁”你的页面事件。

不过，我已经进行了类似的设置，但我解决此问题的方式（除非用户在地址栏中输入 url 并按回车键）是在单击导航树时弹出对话框，将用户发送到新视图。考虑：

----------------------------------------
| Nav 1  |   Asset1 ( view controller )  |
| Nav 2  |   Asset2 ( hidden )           |
----------------------------------------

导航 1 是默认的加载视图，资产 1 已加载，包含“设置页面”表单或类似表单，并且可以更改。诀窍是，Asset1 和 Asset2 是从 AbstractAsset 派生的，而 AbstractAsset 又是一个简单的 ContentPane 扩展。

在 AbstractAsset 中是一个“必须覆盖功能”的函数，称为isDirty

var Viewcontroller = declare("AbstractAsset", [dijit.ContentPane], {
       isDirty: function() { return false; }
});


declare("Asset1", [Viewcontroller], {

startup: function() {
  // sets up form
  ...
  // and references inputfields to 'this'
  this.inputfields = this.form.getChildren();

  // and saves (clones) the state of each field
  var self = this;
  this.inputfields.forEach(function(inputWidget) {
     self.states[inputWidget.id] = inputWidget.get("value");
  });
},
isDirty: function() {
  var self = this;
  var dirty = false;
  this.form.getChildren().some(input) {
     if(self.states[input.id] != input.get("value")) {
        dirty = true;
        return false; // breaks .some loop
     }
     return true;
  });
  return dirty;
}

})

然后，每次导航点击都必须调用当前可见的视图控制器的 isDirty 函数才能继续。假设用户单击导航树 (dijit.Tree) 行节点Nav 2。

var navigation = dojo.declare("NavigationController", [dijit.Tree], {
 currentView : null,
 onLoad: function() {
   // start Asset1 in viewNode by default
   this.currentView = new Asset1({ }, this.viewNode); 
 },
 onClick : function() {
    if(this.currentView.isDirty()) alert("I Dont Think So");
    else {
       this.loadFunction(this.model.selection.getSelected());
    }
 }

});

这是实现卸载检查的总体思路，您需要通过“主应用程序控制器”挂钩任何 onClick 事件以确定应该发生什么。检查用作 cms 导航控制器的此应用程序及其page.js:587以获取 isDirty 示例

于 2012-06-05T10:45:00.577 回答