Dynamically updating a dojox EdgeToEdge-list for PhoneGap-application
I'm using dojo toolkit together with phoneGap to develop an Android app which will show some info dynamically updated from an RSS feed.
I have a problem regarding the formatting of the links and descriptions in them:
I'm trying to change the links to become an mobile-friendly sliding EdgeToEdge list, but when i try to insert the code with Javascript, the click and slide doesn't work, although the buttons show up.
The current HTML part:
<div id="slideList" dojotype='dojox.mobile.EdgeToEdgeList' transition='slide' class='mblEdgeToEdgeList' style='' widgetid='slideListIn开发者_JS百科ner'>
</div>
The concerned script:
slideList = document.getElementById("slideList");
slideList.innerHTML=
"<li dojotype='dojox.mobile.ListItem' moveto='view2' class='mblListItem' id='dojox_mobile_ListItem_0' style='' widgetid='dojox_mobile_ListItem_0'><a class='mblListItemAnchor mblListItemAnchorNoIcon'><div class='mblListItemTextBox'>Alternative</div><div class='mblArrow'></div></a></li>" +
"<li dojotype='dojox.mobile.ListItem' moveto='metal' class='mblListItem' id='dojox_mobile_ListItem_1' style='' widgetid='dojox_mobile_ListItem_1'><a class='mblListItemAnchor mblListItemAnchorNoIcon'><div class='mblListItemTextBox'>Metal</div><div class='mblArrow'></div></a></li>" +
"<li dojotype='dojox.mobile.ListItem' moveto='progressive' class='mblListItem' id='dojox_mobile_ListItem_2' style='' widgetid='dojox_mobile_ListItem_2'><a class='mblListItemAnchor mblListItemAnchorNoIcon'><div class='mblListItemTextBox'>Progressive</div><div class='mblArrow'></div></a></li>" +
"<li dojotype='dojox.mobile.ListItem' moveto='randb' class='mblListItem' id='dojox_mobile_ListItem_3' style='' widgetid='dojox_mobile_ListItem_3'><a class='mblListItemAnchor mblListItemAnchorNoIcon'><div class='mblListItemTextBox'>R&B</div><div class='mblArrow'></div></a></li>";
As you can see I tried to insert the output from the dojo-script as pure HTML here. I have also tried to add the whole dojo thingy, like this:
<div dojoType="dojox.mobile.EdgeToEdgeList" id="slideList" transition="slide" >
<li dojoType="dojox.mobile.ListItem"
moveTo="view2">Alternative</li>
</div>
Albeit, the result was dissapointing.
I found this link, which seems to be almost the same thing, but I'm not sure. Maybe i'm just to stupid to understand the contents :)
Did anyone ran in to the same troubles as me, or have an idea of how to solve this? Maybe I'm just looking at it from the wrong angle..
--- EDIT ---
Found a solution that works like a charm :)
var view = dijit.byId("view1");
var demoWidget = new dojox.mobile.EdgeToEdgeList();
view.addChild(demoWidget);
for(i = 0; i < numberOfLinks; i++){
console.log(nameArray[i]);
var childWidget = new dojox.mobile.ListItem({id:"listObject"+i, moveTo:"view2", label:nameArray[i]});
demoWidget.addChild(childWidget);
}
Found a solution that works like a charm :)
var view = dijit.byId("view1");
var demoWidget = new dojox.mobile.EdgeToEdgeList();
view.addChild(demoWidget);
for(i = 0; i < numberOfLinks; i++){
console.log(nameArray[i]);
var childWidget = new dojox.mobile.ListItem({id:"listObject"+i, moveTo:"view2", label:nameArray[i]});
demoWidget.addChild(childWidget);
}
I had the same issue until I started to use "data-dojo-type" instead of "dojoType". This solved the problem for me (using dojo 1.7, btw).
精彩评论