Javascript 当dojoConfig属性async为true时，如何呈现DateTextBox控件？_Javascript_Html_Asynchronous_Dojo

Javascript 当dojoConfig属性async为true时，如何呈现DateTextBox控件？

javascript html asynchronous dojo

Javascript 当dojoConfig属性async为true时，如何呈现DateTextBox控件？,javascript,html,asynchronous,dojo,Javascript,Html,Asynchronous,Dojo,当我使用async:true设置dojoConfig时，我的DateTextBox不会被渲染，但是当我使用async:false时，一切正常；但是我需要async模式，以便能够使用AJAX长时间轮询。如何解决此问题以呈现我的控件这是我的密码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <style>

当我使用

async:true

设置

dojoConfig

时，我的

DateTextBox

不会被渲染，但是当我使用

async:false

时，一切正常；但是我需要

async

模式，以便能够使用AJAX长时间轮询。如何解决此问题以呈现我的控件

这是我的密码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
</style>
<script>dojoConfig = {async: true}</script>
<script src='dojo/dojo.js'>
</script>
<script>
require(["dojo/ready", "dijit/form/Button", "dojo/dom", "dijit/registry"], function(ready, Button, dom, registry){
    ready(function(){
        // Create a button programmatically:
            var myButton = new Button({
                label: "button"
            }, "topButton");
    });
});


require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){
    ready(function(){
        // Create a button programmatically:
        var myButton = new Button({
            label: "button"
        }, "leftButton");
    });
});

require(["dojo/ready", "dijit/form/DateTextBox", "dojo/dom", "dojo/parser"], function(ready, DateTextBox, dom, parser){
    ready(function(){
        // Create a button programmatically:
        var dateTextBox = new DateTextBox({
            value: new Date(2009, 0, 20)
        }, "centerPicker");
    });
});

require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){
    ready(function(){
        // Create a button programmatically:
        var myButton = new Button({
            label: "button"
        }, "bottomButton");
    });
});

require(["dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],
        function(ready, registry, BorderContainer, ContentPane){
            ready(function(){
                var appLayout = new BorderContainer({
                    design: "headline"
                }, "appLayout");
                 
                appLayout.addChild(
                    new ContentPane({
                        region: "top",
                        content: registry.byId("topButton")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "left",
                        content: registry.byId("leftButton")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "center",
                        content: registry.byId("centerPicker")
                    })
                );
                appLayout.addChild(
                    new ContentPane({
                        region: "bottom",
                        content: registry.byId("bottomButton")
                    })
                );
                 
                // start up and do layout
                appLayout.startup();
            });
        });
</script>
</head>
<body class="claro">
<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#appLayout {
    height: 100%;
}
</style>
<div id="appLayout" class="demoLayout"></div>
<button id="topButton" type="button"></button>
<button id="leftButton" type="button"></button>
<div id="centerPicker"></div>
<button id="bottomButton" type="button"></button>
</body>
</html>


html，正文{
身高：100%；
保证金：0；
溢出：隐藏；
填充：0；
}
dojoConfig={async:true}
require（[“dojo/ready”、“dijit/form/Button”、“dojo/dom”、“dijit/registry”]），函数（ready、Button、dom、registry）{
就绪（函数（）{
//以编程方式创建按钮：
var myButton=新按钮({
标签：“按钮”
}，“顶部按钮”）；
});
});
require（[“dojo/ready”，“dijit/form/Button”，“dojo/dom”]，函数（ready，Button，dom）{
就绪（函数（）{
//以编程方式创建按钮：
var myButton=新按钮({
标签：“按钮”
}，“左键”）；
});
});
require（[“dojo/ready”、“dijit/form/DateTextBox”、“dojo/dom”、“dojo/parser”]），函数（ready、DateTextBox、dom、parser）{
就绪（函数（）{
//以编程方式创建按钮：
var dateTextBox=新的dateTextBox({
价值：新日期（2009年0月20日）
}“中心选择器”）；
});
});
require（[“dojo/ready”，“dijit/form/Button”，“dojo/dom”]，函数（ready，Button，dom）{
就绪（函数（）{
//以编程方式创建按钮：
var myButton=新按钮({
标签：“按钮”
}“底部按钮”）；
});
});
require（[“dojo/ready”、“dijit/registry”、“dijit/layout/BorderContainer”、“dijit/layout/ContentPane”]，
函数（就绪、注册表、BorderContainer、ContentPane）{
就绪（函数（）{
var appLayout=newbordercontainer({
设计：“标题”
}，即“应用程序”）；
 
appLayout.addChild(
新内容窗格({
地区：“顶级”，
内容：registry.byId（“topButton”）
    })
);
appLayout.addChild(
新内容窗格({
区域：“左”，
内容：registry.byId（“leftButton”）
    })
);
appLayout.addChild(
新内容窗格({
地区：“中心”，
内容：registry.byId（“中心选择器”）
    })
);
appLayout.addChild(
新内容窗格({
区域：“底部”，
内容：registry.byId（“底部按钮”）
    })
);
 
//启动并进行布局
appLayout.startup（）；
});
});
html，正文{
身高：100%；
保证金：0；
溢出：隐藏；
填充：0；
}
#申请{
身高：100%；
}

如果您构建了一层依赖关系，这个问题就会消失。问题是，DateTextBox比BorderContainer有更多的依赖项，因此inputelement的

require

在布局中完成下载的时间要晚于

require

这反过来又使dojo.ready以一种“错误”的方式对回调进行排队，而不是按照您所希望的方式。一旦下载了所有依赖项，.ready就有一个要调用的函数列表，但它是按照脚本对其进行排队的方式排序的

为了克服这一点，您可以使用“互斥”，因为在一些奇怪的情况下，可以根据您的设计需要将顺序排队。。您必须使逻辑类似于：

为带有region:center的ContentPane指定一个id

if registry.byId（中心选择器）！=未定义：布局部分中的centerRegionContentPane.addChild（registry.byId（centerPicker））

If registry.byId（中心区域）！=未定义：日期框部分下的registry.byId（centerRegion）.addChild（centerPickerWidget）