可以't更新复制到对话框中的Dijit Widget

我正在慢慢构建一个包含表单的弹出对话框的功能。它只适用于一个例外。在按钮上的onClick事件中，我想更新表单中的一个值。它更新了值，但只更新了输入到表单中的div（emailForm）。我设置了要显示的div，这样我就可以看到更新。如何在myDialog对象中更新它？

<div id="emailForm" Executive Director>
<h1>Contact Form</h1>
<p>Feel free to drop us a line.</p>
<form id="contact-form" action="confirmation.php" method="post">
    <fieldset class="contact-fieldset">
        <ol>
            <li>
                <label for="to">To:</label>
                <input id="to" name="to" type="text" size="40" value="Staff" disabled>
            </li>
            <li>
                <label for="message">Message:</label>
                <textarea id="message" name="message"></textarea>
            </li>
        </ol>
        <input type="submit" class="contact-submit" value="Send">
    </fieldset>
</form>
</div>
<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
    messageText = new TextArea({placeholder: "Your message"},message);
    var emForm = dom.byId("emailForm").innerHTML;
    myDialog = new Dialog({
        title: "My Dialog",
        content: emForm,
        style: "width: 600px"
    });
});
require(["dijit/form/Button",
        "dojo/domReady!"],
        function(Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

更新

根据tik27对问题的描述，我尝试了以下测试：

<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{
    var emForm = '<div id="emailForm" Executive Director><h1>Contact Form</h1><form id="contact-form" action="confirmation.php" method="post"><fieldset class="contact-fieldset"><ol><li><label for="to">To:</label><input id="to" name="to" type="text" size="40" value="Gereral" disabled></li></ol><input type="submit" class="contact-submit" value="Send"></fieldset></form></div>';
    myDialog = new Dialog({
        title: "My Dialog",
        content: emForm,
        style: "width: 600px"
    });
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});
require(["dojo/dom",
        "dijit/form/Button",
        "dojo/domReady!"],
        function(dom, Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

这解决了问题。显示的html只是对完整表单的一个小测试。如何将html与脚本分离，然后在不复制id的情况下将其引入？我研究过模板，但这似乎有些过头了。

更新2

再次，根据Tik27的建议，我尝试了这个：

<script id="emailHTML" type="text/template">
    <div id="emailForm" Executive Director>
        <!-- Same html as above in emailForm -->
    </div>
</script>
<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{
    myDialog = new Dialog({
        title: "My Dialog",
        content: dom.byId("emailHTML").textContent,
        style: "width: 600px"
    });
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});
require(["dojo/dom",
        "dijit/form/Button",
        "dojo/domReady!"],
        function(dom, Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

浏览器会忽略文本/模板脚本中的任何内容，因此id只添加到DOM中一次。请在此网站上搜索有关脚本类型的详细信息。