无法通过dojo.NodeList.instantiate创建dijits [英] Cannot create dijits via dojo.NodeList.instantiate
问题描述
我正在尝试使用 dojo.NodeList.instantiate 方法来渲染dijits，该方法使用现有的HTML元素，并在DOM加载时将其转换为dijits。 / p>
可以找到实例化方法的API参考 here 。
以下示例调用实例化方法在 dojo.addOnLoad 方法中，应该创建一个 BorderContainer 两个 ContentPane 实例，但DIV仍然保持开始，不要变成dijits：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> Dijit Test< / title>
< style type =text / css>
@importdojoroot / dijit / themes / tundra / tundra.css;
@importdojoroot / dojo / resources / dojo.css;
< / style>
< script type =text / javascriptsrc =dojoroot / dojo / dojo.js
djConfig =parseOnLoad：true>< / script>
< script type =text / javascript>
dojo.require（dijit.layout.BorderContainer）;
dojo.require（dijit.layout.ContentPane）;
dojo.addOnLoad（
function（）{
dojo.query（＃divOuter）。instantiate（
dijit.layout.BorderContainer，{
设计：'sidebar'，
gutters：false
}
）;
dojo.query（＃divMiddle）。instantiate（
dijit .layout.ContentPane，{
region：'center'
}
）;
dojo.query（＃divRight）。instantiate（
dijit.layout.ContentPane，{
region：'right'，
splitter：true
}
）;
}
）;
< / script>
< / head>
< body>
< div id =divOuterstyle =width：400px; height：300px>
< div id =divMiddle>中间框< / div>
< div id =divRight>右侧框< / div>
< / div>
< / body>
< / html>
我已经尝试过Firefox 3.5和Internet Explorer 7中的上述代码，并且都无法渲染dijits 。如果我在属性对象中指定了一个标准的HTML属性（例如 style 属性），则此样式更改正确显示，表示正在读取对象：
//使用此示例时出现红色边框
dojo.query（＃divRight）。instantiate（
dijit.layout.ContentPane，{
region：'right'，
splitter：true，
style：'border：1px solid red'
}
）;
以下HTML（使用 dojoType 等属性属性）工作正常 - BorderContainer和ContentPanes在两个浏览器中正确显示：
< div dojoType =dijit.layout。 BorderContainerdesign =sidebargutters =false
style =width：400px; height：300px>
< div dojoType =dijit.layout.ContentPaneregion =center>中间框< / div>
< div dojoType =dijit.layout.ContentPaneregion =rightsplitter =true
style =width：200px;>右边框< / div>
< / div>
请任何人告诉我为什么实例化示例不起作用？
我已经做了大量的搜索，但似乎没有找到任何其他这个问题，这可能意味着我没有使用正确地实例化方法！
谢谢。
在实例化之后，您需要在这些dijits上调用startup。 dojo.query.instantiate 不会为您做，因为它只是创建对象。
在底部的onLoad函数，添加以下内容：
dijit.byId（'divOuter'）。
dijit.byId（'divMiddle'）。startup（）;
dijit.byId（'divRight'）。startup（）;
I am trying to get dijits to render using the dojo.NodeList.instantiate method, which takes existing HTML elements and turns them into dijits when the DOM has loaded.
The API reference for the instantiate method can be found here.
The following example, which calls the instantiate method in the dojo.addOnLoad method, should create a BorderContainer with two ContentPane instances, but the DIVs remain as they start out, and do not become dijits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dijit Test</title>
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(
function() {
dojo.query("#divOuter").instantiate(
dijit.layout.BorderContainer, {
design : 'sidebar',
gutters : false
}
);
dojo.query("#divMiddle").instantiate(
dijit.layout.ContentPane, {
region : 'center'
}
);
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true
}
);
}
);
</script>
</head>
<body>
<div id="divOuter" style="width:400px;height:300px">
<div id="divMiddle">Middle box</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>
I have tried the above code in both Firefox 3.5 and Internet Explorer 7 and both fail to render the dijits. If I specify a standard HTML attribute in a property object (such as the style attribute), this style change appears correctly, indicating that the object is being read:
// The red border appears when using this example
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true,
style : 'border:1px solid red'
}
);
The following HTML (using dojoType and other property attributes) works fine - the BorderContainer and ContentPanes appear correctly in both browsers:
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="false"
style="width:400px;height:300px">
<div dojoType="dijit.layout.ContentPane" region="center">Middle box</div>
<div dojoType="dijit.layout.ContentPane" region="right" splitter="true"
style="width:200px;">Right box</div>
</div>
Please can anyone tell me why the instantiate example does not work?
I have done a lot of searching, but cannot seem to find anyone else with this issue, which may mean that I'm not using the instantiate method correctly!
Thanks.
You need to call startup on those dijits after they are instantiated. dojo.query.instantiate doesn't do it for you since it just creates the objects.
At the bottom of your onLoad function, add these:
dijit.byId('divOuter').startup();
dijit.byId('divMiddle').startup();
dijit.byId('divRight').startup();
这篇关于无法通过dojo.NodeList.instantiate创建dijits的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
