dojo解析器和注册表问题

mklgxw1f  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(140)

请看下面这个令人尴尬的代码片段:
https://jsfiddle.net/nwatzos1/1/

html

<div id="viewLogin" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">    
  <input id="txt" type="text" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="selectOnClick:true, placeHolder:'pin'" name="pin" autocomplete="off" required>    
</div>

js

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/domReady!"
], function(registry, parser) {
    parser.parse();
  var text = registry.byId("txt");
  text.set("value", "hello");
});

配置

data-dojo-config="isDebug: true, async: true, parseOnLoad: false"

如你所见,我得到了错误:
类型错误:文本未定义
如果我将parseOnLoad标志设置为true并注解parser.parse()行,也会发生同样的情况。
我等待domReady,然后解析它......为什么它找不到小部件?对我来说,它似乎非常接近入门文档中的第一个示例:
https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html
我无法查看我的错误。

9cbw7uwe

9cbw7uwe1#

dojo/domReady!是一个插件,可确保DOM准备就绪并加载事件(延迟加载过程,直到加载dom(事件/domNodes),这无需使用回调),恢复dojo/domReady!可确保-> DOM已加载
dojo/ready是使用回调函数的模块,该回调函数不仅不确定是否加载了DOM(因为最后一个回调函数本身使用dojo/domReady),还不确定是否必须加载该块中的所有AMD模块。恢复dojo/ready确保加载了-> DOM+确保解析和加载了同一块(需要)中的AMD模块
当dom被加载时,你调用parser.parse();并解析模板模块,就在它上面,你试图获取对dojox/mobile/TextBox var text = registry.byId("txt");的引用,这将返回null,因为解析器还没有完成解析并将模块加载到dojo注册表。
因此,通过使用dojo/ready,您将确保dom正在加载和所有小部件解析,请参见下面的示例:

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/ready",
  "dojo/domReady!"
], function(registry, parser,ready) {

      parser.parse();
      ready(function(){
         var text = registry.byId("txt");
         console.log(text);
        text.set("value", "hello");
      })
});

Here is Fiddle

oxf4rvwz

oxf4rvwz2#

始终尝试使用parser.parse().then(...)以确保解析器已完成其任务。

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/domReady!"
], function(registry, parser) {
       parser.parse().then(function(){
  	    var text = registry.byId("txt");
  	    text.set("value", "hello");
       });
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<div id="viewLogin" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
  <input id="txt" type="text" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="selectOnClick:true, placeHolder:'pin'" name="pin" autocomplete="off" required>
</div>

相关问题