如何在我的网页中移动dojo脚本？

Question

我有一个工作的javascript页面，它使用dojo来检查dijit/Dialog表单的结果。

<div class="content">
    <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        require(["dijit/registry"],function(registry){
            e.preventDefault(); // prevent the default submit
            if(!myForm.isValid()){ alert("Please fix fields"); return; }
            var inputField = registry.byId("input-field");
            var resultVal = inputField.get("value");
            console.log("Would submit "+resultVal+" here via dojo/xhr.");
            window.alert("Would submit "+resultVal+" here via dojo/xhr.");
            myFormDialog.hide();
        });
    </script>
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    myFormDialog.show();
</script>
</button>

</div>
<script>
  require(["dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", "dojo/on"]);';
</script>

我想将表单中的脚本移动到页面底部，以便我可以将它与其他页面集成。

（此代码由php生成，我使用heredoc来包含dojotools示例中的代码。）

我尝试了以下代码：

<div class="content">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>

<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
  <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
  </script>
</button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});
</script>

这导致页面上显示以下内容（从Chrome开发人员工具复制，其中控制台不显示任何语法错误）：

<div class="content">
  <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
    <form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
      <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
      </div>
      <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button"
          data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
      </div>
    </form>
  </div>
  <p>When pressing this button the dialog will popup:</p>
  <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
    </script>
  </button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});</script>

在这种情况下，似乎没有调用on()处理程序。出现“显示我”按钮。

如果单击它，它将显示带有Foo字段的表单。如果在字段中输入值并单击“确定”按钮，则表单将消失。但是没有消息发布到控制台。

有没有人有一个建议，为什么脚本将作为表单的一部分，但不是作为页面上的单独调用？

原始代码来自dijit / Dialog页面（https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#dijit-dialog）中的“对话框中的表单和功能”部分。