0

我正在开发一个应用程序，该应用程序允许人们选择他们希望表单具有的数据字段。我让它工作了，但是当我试图将表单字段移动到一个表格中以获得一些视觉结构时，我遇到了一个问题。

  // 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");

当我运行代码时，我可以选择我想要的字段，而不是在屏幕文本上绘制文本框，例如：

[object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_0] [object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_1]

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

4

3 回答 3

1

尝试这个 ：

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>

不要忘记引用“class”和“for”，因为它们是 javascript 语法的一部分。

于 2013-06-25T16:26:01.803 回答
0

克雷格感谢您的所有帮助，您是对的，除了在对 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-25T15:05:18.880 回答
0

这些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-24T17:33:22.427 回答