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

Posted 2023-02-16

【中文标题】如何在我的网页中移动 dojo 脚本？

【英文标题】：How can I move a dojo script in my webpage?

【发布时间】：2018-09-09 22:42:24

【问题描述】：

我有一个可用的 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() 处理程序似乎没有被调用。 Show Me 按钮出现。

如果您单击它，它会显示带有 Foo 字段的表单。如果您在字段中输入一个值并单击确定 按钮，该表单就会消失。但是没有消息发布到控制台。

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

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

【参考方案1】：

首先，on(dom.byId("my-button"), "click", function(e)...) 不会触发，因为它附加到一个没有被 dojo 解析器替换的 dom，

您还使用 data-dojo-id 和 id 声明了按钮，

注意data-dojo-id（此处命名时不要使用减号-，而是使用下划线_）在窗口对象中创建一个具有此ID 的全局元素，因此稍后您可以像这里@一样直接访问您的元素987654327@

通过id 创建一个带有widgetid=id 的小部件，以便通过dijit/registry 访问它。

第二：重要的一点是为了访问这些小部件，你应该等到它们都被解析，所以使用回调函数 dojo/ready 来确保所有小部件都被正确解析，

在你的情况下，准备好之后（小部件已解析，没有生成的 dom 项 id="my-button" 被小部件 itelef 替换） 因此提交按钮将直接提交并且没有preventdefault actionned也没有消息

参见下面的工作 sn-p ：

<script type="text/javascript">
  dojoConfig = 
    isDebug: true,
    async: true,
    parseOnLoad: true
  
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />


<body class="claro">
  <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" action="#">
      <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/ValidationTextBox"/>
      </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>
  <script>
    require(["dojo/dom", "dojo/on", "dijit/registry", "dojo/ready", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox"],
      function(dom, on, registry, ready) 

        ready(function() 
          // my_button same as = registry.byId("my-button");
          my_button.on("click", function(e)   
            e.preventDefault(); // prevent the default submit
            console.log("Reached on() function.",myForm.validate());
            if(myForm.validate()) 
              //do som stuff here and then close dilaog
            
          );
          
        );

      );
  </script>


</body>

【讨论】：

谢谢你，嘘。当我下次有机会并发布结果时，我会尝试一下。我认为这会很有帮助。