Javascript Dojo使用domConstruct向现有accordion添加声明性代码
我有一个手风琴,它以编程的方式添加了内容窗格。在其中一个窗格中,我想添加一个包含多个选项卡的选项卡容器。每个选项卡都有许多需要动态创建的控件。但以动态的方式创建它给了我很多时间。我决定采用不同的方法,使用domConstruct.place添加它。我以声明的方式完成了代码的设计,并将其放在每个选项卡的单独html页面中。然后,我尝试将整个选项卡容器作为子级添加到现有accordion的内容窗格中 屏幕上只显示文本内容,但没有选项卡容器控件 代码如下:Javascript Dojo使用domConstruct向现有accordion添加声明性代码,javascript,dojo,accordion,tabcontainer,Javascript,Dojo,Accordion,Tabcontainer,我有一个手风琴,它以编程的方式添加了内容窗格。在其中一个窗格中,我想添加一个包含多个选项卡的选项卡容器。每个选项卡都有许多需要动态创建的控件。但以动态的方式创建它给了我很多时间。我决定采用不同的方法,使用domConstruct.place添加它。我以声明的方式完成了代码的设计,并将其放在每个选项卡的单独html页面中。然后,我尝试将整个选项卡容器作为子级添加到现有accordion的内容窗格中 屏幕上只显示文本内容,但没有选项卡容器控件 代码如下: require(["dgrid/OnDema
require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection",
"dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry",
"dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry,
Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){
var aContainer = registry.byId('accord');
if (!aContainer) {
console.log('Accordion does not exist');
aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
}
//Grid creation part goes here. Grid appears and events works.
var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});
aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();
console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");
}
//下面是dojotoolkit教程中的示例选项卡容器声明性代码,我正在尝试将其放在accordion的内容窗格中
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
Lorem ipsum和周围的人。。。
Lorem ipsum和全方位-秒。。。
Lorem ipsum和全方位-最后。。。
但我得到的是:
Lorem ipsum和周围的人。。。
Lorem ipsum和全方位-秒。。。
Lorem ipsum和全方位-最后
是的,只有文本与网格控件一起显示在accordion的内容窗格中
我拥有的dojo配置还有:
<script type="text/javascript"
djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>
我做错了什么
这种做法不对吗?有什么建议
我真的很感谢你的帮助。谢谢
Ramdojo解析器将标记转换为dojo小部件和DIJIT。它在加载页面时运行一次。添加到页面后,需要在标记上运行它。你有两个选择
parser.parse(tb1)
如果需要首先显示其他声明性代码,则第二种方法是必需的 谢谢你的回答,马特。它起作用了。顺便问一下,这是添加新小部件的最佳方法吗?目前,我有5个html文件对应于5个选项卡的内容,这将被添加到手风琴多次。谢谢。@RamC我可能会创建一个混合了_WidgetsInTemplate类型的自定义小部件。解析器将自动解析模板的内容。