如何将 Dijit 小部件动态添加到 Dojo 表单？答案

【问题标题】：How do I dynamically add a Dijit widget to a Dojo form?如何将 Dijit 小部件动态添加到 Dojo 表单？
【发布时间】：2010-06-30 08:35:13
【问题描述】：

我正在尝试将新的 FilteringSelect 小部件动态添加到我用声明性标签制作的预先存在的表单中（在页面加载时）。

prereqs = 0;
function addAnotherPrerequisite(){  

    var newPreReqCursor = dijit.byId("Prerequisite"+(prereqs-1)).domNode;
    dojo.create("input",{
        id:"prerequisite"+prereqs,
        jsId:"Prerequisite"+prereqs,                        
        dojoType:"dijit.form.FilteringSelect",
        store:"PrerequisitesStore",
        searchAttr:"name",
        style:"width: 350px;",
        required:"true",
        class: "appendedPreReq"},newPreReqCursor,"after");


    dojo.parser.parse( newPreReqCursor.parentNode ); 

    prereqs++;
}

此代码正确构建了一个 FilteringSelect 小部件，但该小部件似乎没有在表单中注册。每当我提交表单时，新小部件中的任何值都不会出现。不过，验证属性有效，它可以正确地从商店中提取值。我什至可以通过它的 jsId(Prerequisite1, Prerequisite2, etc) 调用新的小部件，它只是不会发布！

我还尝试直接调用 FilteringSelect 小部件，而不是 dojo.create。这也制作了小部件，但在 POST 期间没有将值注册到表单中。

var filteringSelect = new dijit.form.FilteringSelect({
        id: "prereq"+prereqs,
        jsId: "Prerequisite"+prereqs,
        store: PrerequisitesStore,
        searchAttr: "name",
        required: true,
        style: 'width: 350px;',
        class: 'appendedPreReq'
    },
    "prerequisite"+prereqs).startup();

我快要疯了。

【问题讨论】：

标签： forms post widget dojo

【解决方案1】：

所以看起来有某种错误或其他东西。我必须明确定义“名称”属性才能让小部件显示在表单的 .getDependents() 方法中。这就是 dijit.forms 获取表单值列表的方式。这样做之后，我也无法通过 dijit.byId 访问这个小部件（没有返回任何东西，默默地捕捉到我猜的错误），所以我通过它的 jsId 返回了带有 eval 的对象。

prereqs = 0;
function(){
    var newPreReqCursor = eval("Prerequisite"+(prereqs-1));
    newPreReqCursor = newPreReqCursor.domNode;

    dojo.create("input",{
            id:"Prerequisite"+prereqs,
            name:"Prerequisite"+prereqs,
            jsId:"Prerequisite"+prereqs,
            dojoType:"dijit.form.FilteringSelect",
            store:"PrerequisitesStore",
            searchAttr:"name",
            style:"width: 350px;",
            required:"true",
            class: "appendedPreReq"},newPreReqCursor,"after");

    var filterSelect = dojo.parser.parse( newPreReqCursor.parentNode );
}

【讨论】：

这很有帮助。我发现只需要在我的情况下指定名称：new dijit.form.TextBox({name: inputNode.name}, inputNode);

【解决方案2】：

这很容易。只需像这样创建一个新对象：

// first let's create an empty node (you can reuse the existing one)
var node = dojo.create("div", {
  // all necessary node attributes
  className: "appendedPreReq",
  style: {
    width: "350px"
  }
}, "myAnchorNodeId", "after");

// now let's create a widget
var widget = new dijit.form.FilteringSelect(
  {
    // all necessary widget properties
    id: "prereq" + prereqs,
    store: PrerequisitesStore,
    searchAttr: "name",
    required: true
  },
  node // optional node to replace with the widget
);

阅读所有内容：

【讨论】：

这是我的初衷。我在实例化 dijit.form.FilteringSelect 的尝试中没有包含 dojo.create 脚本。我实际上已经回答了我自己的问题（看起来像一个错误）。不过，感谢您的帮助。 :D

【解决方案3】：

是的，正如 Eugene Lazutkin 所说，在创建小部件时，与过滤选择相关的隐藏输入类型获取 id 的名称，并且隐藏字段的值也在正确更新。但是当通过 .create() 方法创建过滤选择时，我们需要给出名称，并且在我们从过滤选择中选择一些值后隐藏字段的值不会更新（即使我们模糊了）。 Eugene Lazutkin 你能告诉我为什么会这样吗...如何更新 .create() 方法中隐藏字段的值。

【讨论】：