dijit/form/DateTextBox 未正确解析

Question

dijit/form/DateTextBox 未正确解析的原因是什么？

场景如下：

我有一个页面，其中正确呈现了以下控件：

然后用户可以重定向到另一个页面，我们将他选择的日期存储在当前页面上。当他返回页面时，他应该会再次找到之前输入的日期。日期值是正确的，但似乎没有正确解析 Dojo 控件，因为我得到以下信息：

在什么情况下我们会错误地解析日期？

重要提示：我只在 Chrome 上收到此错误，这在 IE 和 FireFox 上运行良好。

非常感谢！

编辑：以下允许重现问题：

<!DOCTYPE html>
<HTML>
<HEAD>

    <TITLE>Dojo - RS - Date Picker demonstration</TITLE>

    <LINK rel="stylesheet" href="../dojoExtension/dojo/resources/dojo.css"                                                  

    <SCRIPT type="text/javascript">
        dojoConfig = {
                baseUrl: "../dojoExtension/dojo",
                parseOnLoad: false,
                async:true,
                locale: "fr-ch"
        };
    </SCRIPT>

    <SCRIPT type="text/javascript" src="../dojoExtension/dojo/dojo.js">    </SCRIPT>

    <SCRIPT type="text/javascript">
        function loading() {
            require(["dojo/parser", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser){
                parser.parse();
            });
        }

        function replaceDate() {

            require(["dojo/dom-construct", "dojo/_base/window", "dojo/parser" , "dijit/form/DateTextBox", "dojo/domReady!"], function(domConstruct,win,parser){
                var row = "<INPUT type=text data-dojo-type=dijit/form/DateTextBox name=datePickerDemo id=idDatePickerDemo >";
                try {
                    var newRow = domConstruct.place(domConstruct.toDom(row), win.body() );
                    }
                catch(err) {
                    alert(err);
                }
            });
        }

    </SCRIPT>

</HEAD>
<BODY onload="loading();"
      class="tundra">

    <DIV id="myDiv" style="position:fixed; top:150px; left:150px">

        <script type="text/javascript">
            require(["dijit/form/DateTextBox"]);
        </script>

        <INPUT type="text"
               data-dojo-type="dijit/form/DateTextBox" 
               name="datePickerDemo"
               id="idDatePickerDemo" />

        <a href="javascript:replaceDate()">replace the date</a>

    </DIV>


</BODY>
</HTML>

Answer 1

好吧，似乎确实来自 "parser" 问题，以下是有效的：

    <!DOCTYPE html>
<HTML>
    <HEAD>

        <TITLE>Dojo - RS - Date Picker demonstration</TITLE>

        <LINK rel="stylesheet" href="../dojoExtension/dojo/resources/dojo.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/dijit.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/tundra.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/form/Button.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/form/Common.css" />

        <SCRIPT type="text/javascript">
            dojoConfig = {
                    baseUrl: "../dojoExtension/dojo",
                    parseOnLoad: false,
                    async:true,
                    locale: "fr-ch"
            };
        </SCRIPT>

        <SCRIPT type="text/javascript" src="../dojoExtension/dojo/dojo.js"></SCRIPT>

        <SCRIPT type="text/javascript">
            function loading() {
                require(["dojo/parser", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser){
                    parser.parse();
                });
            }

            function replaceDate() {

                require(["dojo/dom-construct", "dojo/_base/window", "dojo/parser", "dijit/registry", "dijit/form/DateTextBox", "dojo/domReady!"], function(domConstruct,win,parser,registry){
                    var row = '<INPUT type="text" data-dojo-type="dijit/form/DateTextBox" name="datePickerDemo" id="idDatePickerDemo2" >';
                    var domObject = domConstruct.toDom(row);
                    try {
                        var newRow = domConstruct.place(domObject, win.body() );
                        parser.parse(registry.byId("idDatePickerDemo2"));
                        }
                    catch(err) {
                        alert(err);
                    }
                });
            }

        </SCRIPT>

    </HEAD>
    <BODY onload="loading();"
          class="tundra">

        <DIV id="myDiv" style="position:fixed; top:150px; left:150px">

            <script type="text/javascript">
                require(["dijit/form/DateTextBox"]);
            </script>

            <INPUT type="text"
                   data-dojo-type="dijit/form/DateTextBox" 
                   name="datePickerDemo"
                   id="idDatePickerDemo" />

            <a href="javascript:replaceDate()">replace the date</a>

        </DIV>


    </BODY>
</HTML>

好吧，我的问题似乎更多地来自 "parser" 理解 :) ...但我们可以认为这个具体问题已解决。

感谢回答的人，帮了大忙！

Answer 2

您使用 dijit/registry 获取了不正确的 domNode。

dijit/registry 将搜索与 domNode 对象不同的 dojo 小部件。

dojo/dom 模块应该用于通过 id 搜索 domNode。
即

require(["dojo/dom"], 
    function(dom){ 
      dom.byId('domId') 
    }
);

查看 here 了解 registry.byId 和 dom.byId

之间的详细解释

在您的实例中，replaceDate() 将更改为

 function replaceDate() {

        require(["dojo/dom", "dojo/dom-construct", "dojo/_base/window", "dojo/parser", 
                 "dijit/registry", "dijit/form/DateTextBox", "dojo/domReady!"], 
            function(dom, domConstruct,win,parser,registry){
                var row = '<INPUT type="text" data-dojo-type="dijit/form/DateTextBox" name="datePickerDemo" id="idDatePickerDemo2" >';
                var domObject = domConstruct.toDom(row);
                try {
                    var newRow = domConstruct.place(domObject, win.body() );
                    // Use dom.byId instead of registry.byId
                    parser.parse(dom.byId("idDatePickerDemo2"));
                    }
                catch(err) {
                    alert(err);
                }
        });
 }

dijit/form/DateTextBox 未正确解析

dijit/form/DateTextBox not correctly parsed

javascript

dojo

date