DOJO：如何在ajax调用后重新启动表单元素？

2 回答

• 2

  我有同样的问题，我找到了一个可能的答案：

  http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-parse-after-ajax-call-again

  根据我的理解，你需要在函数中执行类似的操作，调用它来处理从ajax调用接收的数据：

  function updateform(data)
  {
      var targetNode = dojo.byId(\"step2\");
      targetNode.innerHTML = data;
      dojo.parser.parse(targetNode);
  }
  

  这适用于：

  Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
  

  但我想使用程序化的 . 我会发一个问题 .

  回复于 2024-05-04T11:52:55+08:00
• 3

  DojoX有一个表单管理器来创建精心设计的CRUD应用程序 . 基本上，它允许将平面JSON样式对象映射到表单（读/写），统一事件处理以及您希望使用表单动态执行的许多其他操作 . 它适用于HTML表单元素和Dijit小部件 .

  例：

  dojo.require("dojox.form.Manager");
  
  // our data
  var data = {
    name:   "Bob Smith",
    gender: "male"
  };
  
  // the form manager
  var fm = new dojox.form.Manager({}, "my_form");
  
  // now we can populate the form
  fm.setFormValues(data);
  
  // we can read them back when user submits them
  // or indicated that she finished with them
  var newData = fm.gatherFormValues();
  
  // populate fields separately
  fm.elementValue("name",   "Jane Doe");
  fm.elementValue("gender", "female");
  
  // read a field value
  var newName = fm.elementValue("name");
  

  上面示例的HTML代码段可能是这样的：

  <fieldset id="my_form">
    Name: <input type="text" name="name" value="">
    <br>
    Gender: <input type="text" name="gender" value="">
  </fieldset>
  

  或者它可以是这样的：

  <fieldset id="my_form">
    Name: <textarea name="name"></textarea>
    <br>
    Gender: <select name="gender">
      <option value="male"  >Male<option>
      <option value="female">Female<option>
    </select>
  </fieldset>
  

  或者它可以是这样的：

  <fieldset id="my_form">
    Name: <input type="text" name="name" value="">
    <br>
    Gender: <label><input type="radio" name="gender" value="male">Male</label>
      <label><input type="radio" name="gender" value="female">Female</label>
  </fieldset>
  

  正如您所看到的，演示文稿几乎与表单的机制分开，因此您的UI设计人员需要提供最佳的数据表示，并无限制地调整表单，而无需更改代码或打扰您 . ;-)

  你还能做什么？还有很多好东西：

  // disable all fields temporarily
  fm.disable();
  // ...
  // doing I/O here? we want to prohibit a user
  // from modifying the form until we are done
  // ...
  // now we can enable all fields
  fm.enable();
  
  // sample field list
  var fields = ["name"];
  
  // we can enable/disable fields by name
  fm.disable(fields);
  // ...
  fm.enable(fields);
  
  // let's hide fields and show them back
  fm.hide(fields);
  // ...
  fm.show(fields);
  

  无论底层表单元素/小部件如何，事件处理：

  // our business objective calls for pissing our users royally
  // by popping an alert on every single field change
  var my_alert = function(name, node){
    var onChangeEventName = dojox.form.manager.changeEvent(node);
    return dojo.connect(node, onChangeEventName, function(){
      alert("Are you annoyed yet?");
    }
  };
  var adapted = dojox.form.manager.actionAdapter(my_alert);
  // let's apply our function to all fields
  fm.inspect(adapted);
  

  显然，我们可以启用/禁用/显示/隐藏/更多响应用户的操作，而不是激怒用户 .

  表单管理器包不仅仅包括：观察者，表单处理，类快捷方式 . 整个事情的结构是一组mixins，所以你可以只使用你真正需要的东西来创建自己的表单管理器 .

  从dojox.form.manager开始阅读其文档，并关注链接到mixins和 dojox.form.Manager （默认管理器类，其中包括所有mixins），以获取更多详细信息 . 不要忘记查看the form manager test（警告：测试已针对调试进行了优化，并且可能启动缓慢） .

  是否可以使用非平面数据？是 . 你有两个选择：

  • 将其转换为某种扁平结构，并在需要时返回 . 例：

  var data = {
    name: {
      first: "Bob",
      last:  "Smith"
    }
  };
  

  可以转换为：

  var data = {
    "name-first": "Bob",
    "name-last":  "Smith"
  };
  

  • 使用多个表单管理器来处理不同的部分 .

  通常第一个选项更容易实现 . 只需对数据进行一些预处理和后处理 .

  如何进行输入验证，花哨的数据格式化或其他特定的酷数据字段？考虑使用Dijit小部件 - 他们可以做所有这些事情甚至更多 .

  回复于 2024-05-04T11:52:55+08:00