我对 Dojo 有疑问。Dojo 初始化时,Dojo 会自动创建 2 个 mobileView,其中包含 mobile iconContainers。他在我的页面旁边创建它们。因此,它阻止了我写的观点。我无法单击视图上的按钮。
奇怪的是,它只是偶尔发生!当我刷新 4-5 次时,一切顺利。但是当我再次刷新时,有时会再次发生。
我不知道 Dojo 为什么要创建它们。
在我的 js 代码中,我使用命令制作了一个手风琴容器
var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");
这会在这个 div 中创建一个手风琴容器
<div id="schoolContainer"></div>
在这个容器中,我添加了一个带有下一个命令的 iconMenu
accordion.addChild(pane);
和 iconContainer.placeAt(pane.containerNode); iconContainer.startup();
和手风琴.addChild(pane);
我不明白为什么 Dojo 在我的主页旁边使用 iconContainers 创建新视图。
这些是创建的视图
<div class="mblView" id="dojox_mobile_IconContainer_0_mblApplView" widgetid="dojox_mobile_IconContainer_0_mblApplView" style="visibility: visible;"><h1 class="mblHeading mblHeadingCenterTitle" id="dojox_mobile_Heading_0" widgetid="dojox_mobile_Heading_0" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_0" dir="ltr" widgetid="dojox_mobile_ToolBarButton_0"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_0" widgetid="dojox_mobile_Container_0"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_0" widgetid="dojox_mobile__IconItemPane_0" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_1" widgetid="dojox_mobile__IconItemPane_1" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1B</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_2" widgetid="dojox_mobile__IconItemPane_2" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1C</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_3" widgetid="dojox_mobile__IconItemPane_3" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>
<div class="mblView" id="dojox_mobile_IconContainer_1_mblApplView" widgetid="dojox_mobile_IconContainer_1_mblApplView" style="visibility: visible; display: none;"><h1 class="mblHeading" id="dojox_mobile_Heading_1" widgetid="dojox_mobile_Heading_1" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_1" dir="ltr" widgetid="dojox_mobile_ToolBarButton_1"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_1" widgetid="dojox_mobile_Container_1"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_4" widgetid="dojox_mobile__IconItemPane_4" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_5" widgetid="dojox_mobile__IconItemPane_5" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2b</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_6" widgetid="dojox_mobile__IconItemPane_6" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2c</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_7" widgetid="dojox_mobile__IconItemPane_7" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>
我发现问题是由下一个代码造成的,但我不知道为什么。
/*KLASSENOVERZICHT FUNCTIONALITY START*/
function toonScholen(items){
WL.Logger.debug("Stap 6: toonScholen START");
//alert("Via adapter: "+JSON.stringify(items));
var json = getScholen();
for (var i = 0; i < json.length; i++) {
//alert(json[i].naam);
}
require([
"dojox/mobile/Accordion",
"dojox/mobile/ContentPane",
"dojox/mobile/RoundRectList",
"dojox/mobile/ListItem",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/IconContainer"
], function(Accordion, ContentPane, RoundRectList, ListItem){
var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");
accordion.startup();
var pane;
var scholen = json.scholen;
for (var i = 0; i < scholen.length; i++) {
// ContentPane : Scholen
pane = new ContentPane({
class: "schoolContainer",
label: scholen[i].naam,
icon1:"images/ArrowDown.png",
icon2:"images/ArrowUp.png" ,
iconPos1:"0,0,42,42",
iconPos2:"0,0,42,42"
});
accordion.addChild(pane);
var iconContainer = new dojox.mobile.IconContainer({transition:'scaleIn', iconBase:'images/Tile_Blue.png'});
iconContainer.placeAt(pane.containerNode);
iconContainer.startup();
//IconMenu : Klassen
var klassen = scholen[i].klassen;
for (var j = 0; j < klassen.length; j++) {
var iconUrl;
if (j%3 == 1){
iconUrl= "images/Tile_Blue.png";
}
else if(j%3 == 2){
iconUrl= "images/Tile_Green.png";
}
else if(j%3 == 0){
iconUrl= "images/Tile_Red.png";
}
iconJs =new dojox.mobile.IconItem({label:klassen[j].naam, icon:iconUrl ,moveTo:'klasView', transition:'scaleIn', class:'klasIcon'});
iconContainer.addChild(iconJs);
}
//IconMenu : Klas toevoegen
iconJs =new dojox.mobile.IconItem({label:'', deletable: false, icon:'images/Tile_Toevoegen.png',moveTo:'klasToevoegenView?schoolId='+scholen[i].id,transition:'slide', class:'klasIcon'});
iconContainer.addChild(iconJs);
}
// ContentPane : School toevoegen
pane = new ContentPane({
class: "schoolContainer",
label:"School toevoegen",
icon1:"images/Plus.png",
icon2:"images/Plus.png",
iconPos1:"0,0,42,42",
iconPos2:"0,0,42,42"
});
accordion.addChild(pane);
});
WL.Logger.debug("Stap 6: toonScholen END");
}
/*KLASSENOVERZICHT FUNCTIONALITY END*/