Blog of Appliness

Using Backbone.JS with jQuery Mobile

Posted by on December 05, 2012 in Tutorials | 6 Comments

jquerybackbone

This article was written by Christophe Coenraets and appeared in the June issue of Appliness. The article originally published on his blog at http://coenraets.org/.

Backbone.js is an architectural framework that helps you write well-structured Web applications. It is not, however, a user interface framework and it therefore doesn’t help you with the way your application looks.

Backbone’s confined scope is a good thing: it’s lightweight, non-intrusive, not coupled to things you don’t need, and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of Backbone.

Quest for a Mobile UI Toolkit

After that post, I wanted to create a mobile version of the same application; a version that I could package with PhoneGap and that would look and behave like a native app. Twitter Bootstrap can probably be tweaked for that purpose as well, but I was looking for a UI toolkit dedicated to providing native looking controls and behaviors on mobile devices.

Another Way to Use jQuery Mobile

jQuery Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together architectural structure and UI controls and behaviors. John Bender, my colleague at Adobe and member of the jQuery Mobile team, recently pointed out to me that you can disable the routing and navigation capabilities of jQM, and essentially use it as a pure UI framework on top of other architectural frameworks like Backbone.js.

Sample Application

I ended up spending a decent amount of time trying different things to get the two frameworks to play well together without stepping on each other. To save you some headaches if you are trying to do the same, I put together a simple application with the basic setup to combine Backbone (for the application structure and “routing”) and jQuery Mobile (for its styles and widgets).

NOTE: Another approach would be to use jQM’s “routing” instead of Backbone’s. Ben Nolan has an example of this approach here. I prefer to use Backbone’s routing because I find it more flexible and less “page-centric”.

Here is the app:

Click here to run the application in a separate window. The source code is available in this GitHub repository.

How it works

The key to this approach is to disable jQuery Mobile’s “routing”: In other words, you need to tell jQuery Mobile not to handle links, hash tag changes, and so on. I isolated that code in jqm-config.js:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

If jQuery Mobile is not in charge of page navigation, you also have to manually remove the pages from the DOM when they are not used anymore. Here is one way to do it:

$('div[data-role="page"]').live('pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});

With this configuration in place, you use Backbone’s routing as usual:

var AppRouter = Backbone.Router.extend({
 
    routes:{
        "":"home",
        "page1":"page1",
        "page2":"page2"
    },
 
    home:function () {
        this.changePage(new HomeView());
    },
 
    page1:function () {
        this.changePage(new Page1View());
    },
 
    page2:function () {
        this.changePage(new Page2View());
    },
 
    changePage:function (page) {
        $(page.el).attr('data-role', 'page');
        page.render();
        $('body').append($(page.el));
        $.mobile.changePage($(page.el), {changeHash:false});
    }
 
});

Is this the right stack?

I like the idea of a lightweight architectural framework combined with a UI toolkit. Backbone + Twitter Bootstrap felt right because the two frameworks have different areas of concern and complement each other very well. I was happy to see you could decouple jQM from its navigation infrastructure. However, that’s probably not the main “design center” at this point. I think it would be interesting for jQM to focus on that utilization scenario as well. At the end of the day, frameworks are often a matter of personal preferences, and not all applications are equal. So try it, see if it works for you, and share your experience. What UI toolkit are you using?

Source Code

The source code is available in this repository on GitHub.

A More Real-Life Application

In my next post, I’ll share a Backbone.js + jQuery Mobile version of the Employee Directory application first explored with Backbone.js + Twitter Bootstrap.

Comments

comments

Powered by Facebook Comments

6 Comments

  1. Thibault
    December 5, 2012

    2 month ago i wrote an article to discuss JQM and Backbone.js integration: http://www.thibault-durand.fr/post/33362116726/discussing-jquery-mobile-and-backbone-js-integration

    Reply
    • Michaël Chaize
      December 19, 2012

      Cool. Can we publish it in Appliness ?

      Reply
      • Thibault
        January 22, 2013

        Yep of course, feel free. (sorry for late reply, didn’t have any notification of this message)

        Reply
  2. Chad Cantrell
    January 6, 2013

    I was JUST looking into this combo myself. I have a couple existing apps that feel a bit “linear” so far as JQM goes. I would love to do exactly this. Very helpful info. Looking forward to your bootstrap/user app example.

    Thanks for posting.

    Reply
  3. Jake Churchill
    March 7, 2013

    I followed this approach and it has helped me a ton! Thank you! However, there is one thing I’m trying to figure out and maybe you’ll know. When using a JQM select and setting data-native-menu=”false” clicking the select throws a new hash up on the URL. Since JQM is not listening for hash changes, the popup for the select never shows. Do you know a way around this or have you encountered this at all?

    Thanks!

    Reply

Leave a Reply