开发者

Dynamically updating a dojox EdgeToEdge-list for PhoneGap-application

开发者 https://www.devze.com 2023-03-12 07:10 出处:网络
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'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

精彩评论

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