开发者

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&amp;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).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜