With requireJs, router initialises after jQuery Mobile page events trigger

[jcalonso]

This is not an issue, I just want to share my solution for this problem that took me a while to figure out how to fix.

The problem can be common, there are some people reporting issues with the router being initialized 'late' after jQuery mobile events happened. I tried to create the JQM router as soon as possible but still wasn't able to do it before the page events trigger.

The solution was very simple, just disabled the autoInitializePage option like this:

$.mobile.autoInitializePage = false;

And then after initialising the router call it manually.

Here is a simple example:

The main.js

require.config({
    modules: [
        {
            name: 'main'
        }
    ]
    paths: {
        'jquery': '../components/jquery/jquery',
        'jquery.mobile': '../components/jquery-mobile/dist/jquery.mobile',
        'jquery.mobile.router': '../components/jquerymobile-router/js/jquery.mobile.router',
    },
    shim: {
        'jquery.mobile' : {
            'deps' : [ 'jquerymobile.config','jquery.mobile.router'],
            'exports': '$.mobile'
        },
        'jquery.mobile.router': {
            'exports': '$.mobile.Router'
        }
    }

});

require([
    'app'
], function (App) {

    App.initialize();
});

The app.js

define([
    'router'
], function (Router) {

    var initialize = function () {

        // Initialize Router
        Router.initialize();

        // Initialize jqm page
        $.mobile.initializePage();

    };

    return {
        initialize: initialize
    };
});

The router.js

define([
    'jquery',
    'jquery.mobile.router',
    'jquery.mobile'
], function ($) {

    var Router = {

        initialize: function () {
            var router = new $.mobile.Router({
                    '#myPage([?].*)?': {
                        handler: 'myPage',
                        events: 'bs'
                    }
                },
                {
                    myPage: function (type, match, ui, page, evt) {

                        // Do something
                    }
                });
            return router;
        }
    }

    return Router;
});

The jquerymobile.config.js

define(['jquery'], function ($) {
    $(document).on("mobileinit", function () {
          $.mobile.autoInitializePage = false;
    });
});

[logankoester]

Thanks, this helped me out today.

[sheppard]

I've had a similar issue, which I resolved by making my vendored jquery.mobile depend on jquery.mobile.router:

https://github.com/wq/wq.app/blob/master/js/jquery.mobile.js#L16

It would be nice to figure out a way to get around this ordering issue - how important is the mobileinit hook?