Deploying a Durandaljs/Phonegap app to android

Question

I need help, I'm at my wits end here. I have developed an app with durandaljs and I have been doing my testing on the browser, so far it works like a dream! Then I try to deploy the app to an android device and all hell breaks loose!

I followed the directions here and here to optimize my build with Weyland using Node. I get a main-built.js file inside my app folder and a build folder pretty much containing everything in app and lib folders (eek!!!). So first question, what do I copy to my phonegap android www folder; the contents of build or the contents of my initial application?

The guide says the build includes a custom version of Almond so I don't need to load requirejs in my app (yay!) and I only have to change the requirejs script tag to point to main-built (which one the one in ./build/app/ or the one in ./app??).

So I use the one in my initial app, now I have just two script references in my index.html

<script type="text/javascript"  src="phonegap.js"></script>
<script src="./app/main-built.js"></script>

Back tracking a bit, in my main.js; I kept thinking how to make sure the app didn't start until after deviceready was triggered and the dom had loaded. I saw this youtube video and I took a cue from the guys code so now my main.js before optimization looks in part like this

requirejs.config({
paths: {
    'text': '../lib/require/text',
    'async': '../lib/require/async',
    'domReady': '../lib/require/domReady',
    'durandal': '../lib/durandal/js',
    'plugins': '../lib/durandal/js/plugins',
    'transitions': '../lib/durandal/js/transitions',
    'knockout': '../lib/knockout/knockout-2.3.0',
    'bootstrap': '../lib/bootstrap/js/bootstrap',
    'jquery': '../lib/jquery/jquery-1.9.1',
    'jpanelmenu': '../lib/jpanelMenu/jquery.jpanelmenu.min'
},
shim: {
    'bootstrap': {
        deps: ['jquery'],
        exports: 'jQuery'
    }        
}
});


define(['domReady', 'durandal/system', 'durandal/app', 'durandal/viewLocator', 'scripts/dealtag'], function (domReady, system, app, viewLocator, dealtag) {

domReady(function () {
    var useragent = navigator.userAgent.toLowerCase();

    if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios')) {
        document.addEventListener('deviceready', onDeviceReady, false);
    }
    else {
        onDeviceReady('desktop');
    }
});

function onDeviceReady(desktop) {
    if (desktop !== 'desktop')
        cordova.exec(null, null, 'SplashScreen', 'hide', []);

    app.title = 'My App';
    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();
       ....my own initialization code

    });
}
});

So back to after optimisation, I copy the contents of build + my css folder which wasn't included in the optimisation to the www folder, run phonegap local build android; then I deploy this to my android device. The first page of the app (registration page) loads ok and in logcat I can see a lot of the same stuff that I could see in the browser console including some of my own console.log check points. However, when I click on a link to go to any other page, all I see is a white screen on my device and the following in never ending errors in logcat

Does anyone have any idea what I am doing wrong coz loads of people seem to be developing for android using durandaljs. Thanks in advance for any help you can give.

Answer 1

I figured out what the cause of the "confusion" is. If you have been doing your routing with Sammyjs before migrating to durandaljs, you may also come into this confusion. With sammyjs, having a route in the href attribute of your view acts like a link and automatically navigates you to the corresponding route. Something like this

<a href="#mypage">My Page</a>

or with a ko binding

<a data-bind="attr: {href: '#mypage/' + id}"></a>

This makes durandaljs go berserk! In durandal create a function in you view model like this

define(['plugins/router', 'knockout'], function (router, ko) {
var myviewmodel= function () {
    this.list= ko.observableArray();
}
....
myviewmodel.prototype.showItem = function (item) {
    router.navigate('mypage/' + item.id);
}

return myviewmodel;
});

and then in your view you can have

<a data-bind="click: $parent.showDeals"> <!-- if within a list context -->

or

<a data-bind="click: showDeals">

I hope this saves someone the needless grief I had to go through for hours unend trying to figure out what the problem was.