Justin McCandless

The helpfulness of using several third party tools can have a price when you try to get them to all play nice together, as I learned when using the combination of Yeoman, Requirejs, jQuery Mobile, and Backbone. There is a lot of help out there though; the jQuery Mobile site itself has an example on using jQuery Mobile, Backbone, and Requirejs together, and on Stack Overflow there are plenty of helpful questions and answers on similar combinations. But when it came time for me to hit yeoman build on my particular setup, nothing given on the internet worked quite as expected. Here is the working setup that I finally found.

The closest thing that I could find online to my very complicated setup was this Stack Overflow answer. After a bit more tweaking I was able to get mine working with the following setup. This is my working main.coffee file:

And here is my jquery.mobile.config, which sets the necessary config parameters in jquery mobile at just the right time:

define(['jquery'], function ($) {

    $(document).on("mobileinit", function () {
        // Prevents all anchor click handling
        $.mobile.linkBindingEnabled = false

        // Disabling this will prevent jQuery Mobile from handling hash changes
        $.mobile.hashListeningEnabled = false

        //$.mobile.ajaxEnabled = false;
        //$.mobile.pushStateEnabled = false;
    });

});

Notice the very specific order that things are loaded. You need your jQuery Mobile configuration to set the `mobileinit` event before jQuery Mobile itself is loaded. On top of that, your router can't change the page until after jQuery Mobile has loaded and the `pageinit` event has fired for your first page. It's a delicate balance to get right using the Requirejs setup, and it's made even more difficult by how strictly `yeoman build` puts everything together.

Also notice that fastButtons and toolbarPolyfill are jQuery Mobile plugins, so you can get plugins to work as well by following this order. App.init() is simply where I instantiate my Backbone app, including the router, in the referenced "app" file.

If you find yourself with a slightly different configuration and still can't quite get it to build, there are plenty of other permutations to check out on stack overflow and elsewhere. Take a look at all of the links in my first paragraph and good luck.