Dojo domConstruct - 将行插入表中

我正在研究一个应用程序，它将允许人们选择他们希望表单具有哪些数据字段。我有它的工作，但当我试图将表单字段移动到一个表的一些视觉结构时，我遇到了一个问题。Dojo domConstruct - 将行插入表中

// Now print the form to a new div 
    array.forEach(selectedFields, function(item, i) { 
     var l = domConstruct.create("label", { 
            innerHTML: item + ': ', 
            class: "dataFieldLabel", 
            for: item 
           }); 
           var r = new TextBox({ 
            class: "dataField", 
            name: item, 
            label: item, 
            title: item 
           }); 
           var a = domConstruct.toDom("<tr><td>" + l + r + "</td></tr>"); 
           domConstruct.place(a, "displayDataForm");

当我运行代码，我可以选择我想要的领域，而是文本框被绘制在诸如屏幕上的文字：

[对象HTMLLabelElement] [小工具dijit.form.TextBox，dijit_form_TextBox_0] [对象HTMLLabelElement] [小工具dijit.form.TextBox，dijit_form_TextBox_1]

而不是打印到屏幕上。我认为这是因为我传递了domConstruct.place文本和对象的混合。有关如何解决此问题的任何想法？谢谢！

来源

2013-06-24 Otto Borden

试试这个：

require(["dojo/_base/array", "dojo/dom-construct", "dijit/form/TextBox", "dojo/domReady!"], function(array, domConstruct, TextBox){ 
    var selectedFields = ["Foo", "Bar", "Baz"]; 
    array.forEach(selectedFields, function(item, i) { 
     var tr = domConstruct.create("tr", {}, "displayDataForm"), 
      td = domConstruct.create("td", {}, tr), 
      l = domConstruct.create("label", { 
       innerHTML: item + ': ', 
       'class': 'dataFieldLabel', 
       'for': item 
      }, td, 'first'), 
      r = new TextBox({ 
       'class': 'dataField', 
       name: item, 
       title: item 
      }).placeAt(td, 'last'); 
    }); 
});

这里假设你在你的HTML有这样的：

<table id="displayDataForm"></table>

不要忘记引用 “类” 和 “” 因为这些部分javascript的语法。

来源

2013-06-25 16:26:01 Philippe

domConstruct函数不适用于小部件。您可以创建html，然后查询输入节点并创建测试框。

var root = dom.byId("displayDataForm"); 
domConstruct.place(root, 
    lang.replace(
     '<tr><td><label class="dataFieldLabel" for="{0}>{0}:</label><input class="inputNode"></input></td></tr>', 
     [item]) 
); 

query('.inputNode', root).forEach(function(node){ 
    var r = new TextBox({ 
     'class': "dataField", 
     name: item, 
     label: item, 
     title: item 
    }); 
});

来源

2013-06-24 17:33:22

克雷格，谢谢你的回应。我的代码仍然不起作用，但现在比以前更接近了。我将你的代码粘贴到我的文件中，现在我收到以下错误：未捕获的TypeError：无法调用空值的方法'appendChild' –

您是否有一个id为displayDataForm的dom节点？ –

是的，我已将所有脚本放在标签上方。此外，我可以打印根变量到控制台，它是：

另外我正在努力获得一个JSFiddle和运行在http://jsfiddle.net/6YzmT/ –

克雷格感谢您所有的帮助，你是对的，只是在调用domConstruct.place的第一个参数是节点追加，第二个参数是要追加到refNode。谢谢。

// Now print the form to a new div 
array.forEach(selectedFields, function(item, i) { 
    var root = dom.byId("displayDataForm"); 
    domConstruct.place(lang.replace(
      '<tr><td><label class="dataFieldLabel" for="{0}">{0}: </label><input class="dataField"></input></td></tr>', 
      [item]), root 
    ); 

    query('.dataField', root).forEach(function(node) { 
     var r = new TextBox({ 
      'class': "dataField", 
      name: item, 
      label: item, 
      title: item 
     }); 
    }); 
});

来源

2013-06-25 15:05:18

Dojo domConstruct - 将行插入表中

回答

相关问题