Question

我正在尝试使用模板html动态添加表单字段。我已设法将dojo / Declaration写入DOM，但调用parser.parse（new element）似乎不会解析元素。

我现在的代码是：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script>
    var dojoConfig = {
      async: true,
      parseOnLoad: false,
      has: {
        "dojo-debug-messages": true
      }
    }
  </script>
  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
  <script>
    require(["dojo/parser",
      "dojo/domReady!"
    ], function(parser) {
      parser.parse();
    });
  </script>
</head>

<body>
  <form>
    <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
        <div id="formContents">
          <div>
            <button id="add">Add</button>
          </div>
          <fieldset data-dojo-type="dijit/Fieldset">
            <legend style="align:left">
              <label>Form</label>
            </legend>
            <table>
              <tbody>
                <tr>
                  <td>
                    <input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
                  </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
          <div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
            <fieldset data-dojo-type="dijit/Fieldset">
              <legend style="align:left">
                <label>Form</label>
              </legend>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </fieldset>
          </div>
          <script>
            var jsp_row = 0;
            require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
              ready(function() {
                on(dom.byId("add"), "click", function(e) {
                  e.preventDefault();
                  console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
                  var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
                  var newForm = domConstruct.place(form, "formContents", "after");
                  parser.parse(newForm);
                });
              });
            });
          </script>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

＆＃13;

我如何才能获得它，如果我点击添加，我可以在当前显示的字段集下面添加声明的字段集？

非常感谢！

Answer 1

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script>
    var dojoConfig = {
      async: true,
      parseOnLoad: false,
      has: {
        "dojo-debug-messages": true
      }
    }
  </script>
  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
  <script>
    require(["dojo/parser","dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/Fieldset", "dijit/form/TextBox", "dijit/Declaration",
      "dojo/domReady!"
    ], function(parser) {
      parser.parse();
    });
  </script>
</head>

<body>
  <form>
    <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
        <div id="formContents">
          <div>
            <button id="add">Add</button>
          </div>
          <fieldset data-dojo-type="dijit/Fieldset">
            <legend style="align:left">
              <label>Form</label>
            </legend>
            <table>
              <tbody>
                <tr>
                  <td>
                    <input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
                  </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
          <div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
            <fieldset data-dojo-type="dijit/Fieldset">
              <legend style="align:left">
                <label>Form</label>
              </legend>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </fieldset>
          </div>
          <script>
            var jsp_row = 0;
            require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
              ready(function() {
                on(dom.byId("add"), "click", function(e) {
                  e.preventDefault();
                  console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
                  var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
                  var newForm = domConstruct.place(form, "formContents", "after");
                  parser.parse(newForm);
                });
              });
            });
          </script>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

Dojo动态添加表单元素

1 个答案: