IBM Worklight - Unable to navigate between views

问题

I am trying to develop a simple app that consist of multiple scrollable views, but the navigation between views like from "Home" view to "view1" is not working. Unable find out the reason of that...

HTML:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>index</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
            <script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
        </head>
        <body style="display: none;">

    <div data-dojo-type="dojox.mobile.ScrollableView" id="Home">
        <div class="wraper" data-dojo-type="dojox.mobile.Container">
        <img src="images/Shelter1.png" alt="some_text">
        </div>
        <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
            <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="moveTo:view1">Label</li>
        </ul>
    </div>

<div data-dojo-type="dojox.mobile.ScrollableView" id="view1">
    <div class="wraper" data-dojo-type="dojox.mobile.Container">
        <img src="images/Shelter2.png" alt="View">
        </div>
        <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
            <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-left-icon.png" data-dojo-props="transition:'flip',dir:'-1',moveTo:Home">Previous</li>
            <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="transition:'flip',dir:'1',moveTo:view2">Next</li>
        </ul>
    </div>
    <div data-dojo-type="dojox.mobile.View" id="view2"></div>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

回答1:

You're missing quotes around the ID in your moveTo. For example:

<li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="moveTo:view1">Label</li>

Should become:

<li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="moveTo:'view1'">Label</li>

That way it will work, I tested it out on JSFiddle (I used image placeholders). The best way to know if you need quotes is by checking the API documentation. If you look at the moveTo property, you will notice that is has an [S] icon in front of it, which means it's a String (and Strings do need quotes).

回答2:

The below example code is built on top of the one provided to you in this question; This time around views are added inside the scrollableView and you move between them using the moveTo attribute, as well as using the selected attribute to pick a default view to display inside the scrollableView.

Example code: http://pastebin.com/SD0SU3wV

Documentation:

dojox/app/View
dojox/app/scrollableView
dojox/app/TabBar
dojox/app/TabBarButton

Edit: Dimitri's answer pinpoints to your exact error, mine simplifies the example a bit... I'd go with his. :-)

来源：https://stackoverflow.com/questions/20907901/ibm-worklight-unable-to-navigate-between-views

标签

android

dojo

ibm-mobilefirst