Using Backbone.js with jQuery Mobile

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.

  • I’m working with other members of the jQuery Mobile community on the jQuery Mobile Cookbook (to be released by O’Reilly). There’s going to be an entire chapter on utilizing jQM for large scale applications. Connecting with Backbone and Knockout will be two the recipes.

    • Andy~

      Has this book been published… I have been working on a jquery mobile project trying to plug it into mvc… but am having problems,

  • John Fawcett

    Would just like to point out that this posting has been immensely helpful in starting my project a couple of days ago. I had little experience in backbone and none in jQuery Mobile so knowing that the routing systems clashed was awesome.

    I initially did things your way, but I’d like to share my method. I couldn’t get configuration on “mobileinit” to work consistently for some reason, so I listened to the “pagebeforechange” event.
    // Prevent jqm from handling routes
    $(document).on(‘pagebeforechange’, function(e, data){
    // Only on url updates, non-jquery elements
    if (typeof data.toPage === “string”) {
    e.preventDefault();
    var url = $(‘‘).attr(‘href’,data.toPage)[0].pathname; // Get our path
    app.router.navigate(url, {trigger: true});
    }
    })
    In my Route:
    var page = new app.Views.TestPage();
    page.render();
    $.mobile.changePage($(page.el), {changeHash: false});

    In addition, I put the jquery page enhancement stuff inside the views render method:
    render: function(){
    $(this.el).html(app.templates.test());
    $(‘body’).append($(this.el));
    $(this.el).page();
    return this;
    }

    The main thing that bugged me about your solution is the use of the deprecated ‘live’ function. Why not just use ‘on’? Furthermore, we can put that event directly on the view:
    views.TestPage = Backbone.View.extend({
    events: {
    ‘pagehide’: ‘onPageHide’
    },

    onPageHide: function(){ $(this.el).remove(); }
    });

    Either way, thanks a lot!

    • John Fawcett

      Yeah, that’s all sorts of horrid formatting. Should be:
      var url = $(‘<a />‘).attr(‘href’,data.toPage)[0].pathname; // Get our path

      • David A.

        Hi John Fawcett,
        thanks for your enhancement.
        Do you have an full example somewhere public?

  • Pingback: Employee Directory Sample App with Backbone.js and jQuery Mobile()

  • Pingback: Employee Directory Sample App with Backbone.js and jQuery Mobile()

  • Pingback: developpement mobile | Pearltrees()

  • M van Dillen

    Thanks, dropping the jqm-config.js in my project fixed the navigation for me.

  • I feel your pain about the mobile UI toolkit. I have been on the quest to find the “right” mobile framework for some time now. My biggest issue is that I have a large web app who’s features keep growing, but to have this codebase also work for mobile has been a huge headache.

    I started with Titanium, then moved to Sencha touch, which is where my mobile app resides. The problem is that the code is completely separate from my app so nothing is shared. I want to move to a Backbone.js powered UI that I could then “share” with my mobile apps. This solution comes close so I’m happy to see you struggling with the same issues. What I’d really love is to use Sencha Touch’s animations and UI components with Backbone but so far haven’t had any luck.

    Do you do any freelancing work, I’d love to chat with you more about these experiences as I think we’re on the same page in terms of the mobile UI framework struggle.

    Anyways awesome posts, I am going to read through the others and appreciate you taking the time to pave the path.

  • Thanks a lot for you ideas, I got my own backbonejs jquery mobile sample working :) if you want to you can check it out at https://github.com/ronaldpatino/backbone-namespace/tree/jqm. I think I can move to the next step now.

    • ali khan

      The situation comes up usually.Most people are used by SEO Suppliers, but some are also recognized by SEO Expert solutions.As with company cope or buy you must only spend money. affair dating sites

  • Pingback: Using Backbone.js with jQuery Mobile | designoMatt()

  • Presley

    Thank you for the article, you saved the day. I have experimented a lot with this and also the other alternative (not using the backbone.js routing) and I like your approach.

    I just want to add you don’t have to remove the pages from the DOM. They can still be there after you have changed the page. You will need to remove them only if you are afraid that the DOM will get too big, otherwise, you don’t need to. Correct me if I’m wrong.

    One more thing, do you know a convenient way of how to set the transition, I mean every change page needs to have its own transition and the only way I figured how to do this is to pass the transition it in the url (which is ungly) or use global variable (which is still not very beautiful approach).

    Thank you again!

    • Just to follow up above, to prevent the DOM from removing the elements, remove or comment this line from jqm-config.js

      // $(‘div[data-role=”page”]’).live(‘pagehide’, function (event, ui) {
      // $(event.currentTarget).remove();
      // });

      In this case, you will have to rearrange the router works so that views aren’t instantiated every time you switch pages, instead just load them up all at once. If they’re dependent on a model then trigger the model to re-render on change or reset.

  • you can use this.$el instead of $(this.el). fuckyeah backbone <3

  • Dipin Kumar Krishnan

    This post helped me to solve a blocker in my project. But, my doubt now is, can we have the mobile gestures like, swipe, tap, swipe left etc as events in the view?
    For example
    Events:{
    “tap #btnSignIn”:”doSignIn”
    }
    Does backbone support these mobile gestures?

  • Pingback: 使用JQuery Mobile + RequireJS + BackboneJS模块化开发移动应用 | RIA分享|这里是RIA的时刻()

  • Ruben Müller

    Thank you for your post, it helped me alot to get started! :)

  • Mike

    Thanks for the providing this.

    I’m trying to figure out how to include a fixed footer navbar within this framework that navigates between the pages without reproducing it within each of the pages. Any hints as to how this would be done?

  • dunhakdis

    This is not working anymore with jquery.mobile-1.1.0.min.js

    • DavidAm

      For me, it is working with 1.1.0 –

  • Pingback: Getting started with HTML mobile application development using jQuery mobile, RequireJS and BackboneJS | Appliness()

  • Jared

    This was very helpful, thanks! Just curious if anyone else is having trouble with routes containing slashes when using this method. In my routes table I have an entry like “:page/:query” and it’s only getting hit after a second click. The first click seems to change the page’s url. Btw, it works if I change the slashes to some other character.

  • Rafael

    Thank you for your post, it was very helpful in getting backbone and jquery mobile working together.
    Has anybody experienced problems with certain jquery mobile form controls such as the collapsible lists? In my case, when I let the router (with the changes you suggested) change me to a page that contains theses types of controls they don’t come out right. When I reload the page manually the page is rendered correctly. Any clues as to what might be causing this? (Other controls don’t have these problems)

  • TheMCME

    Thanks for the tutorial. There is problem with footers/navbars though, it doesn’t show the active item in the bar unless you click 2 times in a row on the item, I think it’s because the way the changePage method in the router creates a new page and removes the old one… Don’t know yet how to fix that and some help would be appreciated! Thanks.

  • I appreciate this post. Earlier this year I built http://icon.spigit.com/. I used knockout.js with jQuery mobile and a CSS framework for responsive apps. I am pretty happy with this stack — it was very quick to get a clean integration going and my team was able to deliver the first release in a little over 3 months. For the first iteration I went with a stock implementation of jQM using the built-in link binding and hashchange mgmt. I was surprised with how far it got me. I added some state keeping params in the URL with BBQ also. Eventually, I want to clean up the URL window with more of a hash bang format and I am looking at pathjs for that. Thanks for this post — it is a great starting point for me to add in the new router.

  • Mark

    FYI, the Backbone book, http://addyosmani.github.com/backbone-fundamentals/, talks about how to get Backbone and JQM to cooperate, by disabling JQM’s router. Search for “Backbone & jQuery Mobile”.

    • Actually the approach suggested in the Backbone book is not working. The minimun configuration I found working is: $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false;

  • Wayne

    Just discovered that the ‘pagehide’ event monitor needs to watch for dialogs as well:

    $(‘div[data-role=”page”],div[data-role=”dialog”]’).live(‘pagehide’, function (event, ui) {
    $(event.currentTarget).remove();
    });
    gist here: https://gist.github.com/3369688

  • Adrian

    Thanks for the post! It is truly useful. Any news regarding the second part?

  • Pingback: Getting started with HTML mobile application development using jQuery Mobile, RequireJS and BackboneJS | TechnoVeille()

  • fangzx

    Use this routing method, it is difficult to show popup in new jquery mobile 1.2. Anyone can help?

  • Jose Carrillo

    How would you apply this technique on a website built on php?

    Thanks

  • Pingback: [Javascript] Un nuovo modo di scrivere il front-end con Backbone.js + CoffeeScript()

  • Leandro Costa

    There’s a problem with jqm-config.js + with many options.
    JQM renders in different ways depending on their sizes [see http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js line 8553] . If the widget is too big JQM creates a new page and changes to it. When the execution gets line 3928 JQM tries to call active.url.indexOf( dialogHashKey ) , but active.url is undefined. Does anybody know how to solve this problem?

    • Josh Schneider

      Using jQM with Knockout and Sammy, and using all the usual jQM config settings to allow Sammy to control routing (including $.mobile.linkBindingEnabled=false), but now older Android, particularly, has issues with link event handling. Not only are jQM link event styles unhooked (buttons and listview items don’t change color on touch), but the entire event goes unhandled. Touch events work reasonably well in most other phones. Anyone else experienced this and have a workaround they’ve used to fix the issue? I wish there were a config to just get jQM to handle touch abstraction and event UI, but leave routing to another framework.

    • Seth

      Leandro,

      Getting the same issue. Were you able to come up with a resolution?

    • Seth
  • Pingback: Using Backbone.JS with jQuery Mobile | Appliness()

  • dan

    Hi there.. love this but is can you suggest why this doesnt work on a windows phone 7? and what the possible solution may be? (apart from to get a better phone..)

  • Sunny

    Hi

    I wanted to append the html in a div instead of body. But i am getting error.
    I want to create 3 regions header, content and footer and only want to change the content area.

    Thanks,
    Sunny

  • Pingback: Building radvisor.net ✩ Mozilla Hacks – the Web developer blog()

  • Hey, this code saved me from a lot of headaches.

    Thanks a lot!

    If you are interested i’ve ported the javascript version of the code to coffeescript in https://gist.github.com/luiscronicl/4953670

  • ryo

    two hours pulling my hair to trigger jqmobile restyle my page.
    that’s the cure!
    $.mobile.changePage($(page.el), {changeHash:false});

  • Pingback: 开发Web App的一些工具和经验总结 | qhm123(鸣)'s blog()

  • Chris Lee

    When pages scroll back, the direction is wrong!

  • Besides, I can still get the scent from fabric softener and dryer sheets.Tagged with cleaning productsI use Tide Simple Pleasures for all of my laundry. Simple fake louis vuitton coin pouch http://fakelouisvuittonspeedy.blogspot.com/

  • Hi, thanks for this post. It helped me a lot! Anyway if we are navigating from 1 page to another, do we still need to unbind the events attached to the previous page to avoid ghost views? Since I can see you only remove the page when rendering a new page like this:

    // Remove page from DOM when it’s being replaced
    $(‘div[data-role=”page”]’).live(‘pagehide’, function (event, ui) {
    $(event.currentTarget).remove();
    });

    Should we do something like:

    // Remove page from DOM when it’s being replaced
    $(‘div[data-role=”page”]’).live(‘pagehide’, function (event, ui) {
    $(event.currentTarget).remove();
    $(event.currentTarget).close();
    });

  • You’re a saint. Worked for me with jQM & angular.

    • Edgardo

      Hi Mike,

      Can you send sample of code on how you have done jQM with Angular please.
      Thanks.

  • Thanks for any other informative site. The place else
    may I get that kind of info written in such an ideal manner?
    I have a venture that I’m just now running on, and I’ve been on the look
    out for such information.

  • Anna

    I was really searching for such a nice post…Thanks for sharing such a nice information, its beneficial for me…Keep sharing more.
    Mobile Apps Development USA

  • Andi

    Hey Christopher,

    thanks for this nice article. Although it’s from 2012, this topic is still up-to-date. I’m using DurandalJs (http://durandaljs.com/), another cool modularization framework, to organize my webapps. I also want to combining it with jQuery Mobile and your configuration points me to the right direction :-)

    Go on with this sort of articles.
    Best regards,
    Andi

  • Tommy

    Hi guys,

    have you try to run this app in android emulator or maybe in IBBDemo2 – iPhone and iPad simulator, because this don’t work in them. I tried to run on android 2.3 device and it worked.
    So I am confused a bit , does this combination of backbone + jqm work well on most platforms or this is just bug in simulators.
    Do you have similar experience ??

    Regards,
    tommy

  • Hello,

    thank you for this realy helpful information. We also develope Mobile Apps, and Backbone.js is also an option for us. But it sounds very interesting….

  • Nice post Christophe, I am using Kendo UI for current projects which is working well – great widgets and nice ‘native’ feel. Thanks again for the post.

  • I truly love your site.. Great colors & theme. Did you create this site yourself?
    Please reply back as I’m planning to create my very own blog
    and would love to find out where you got this from or exactly what the theme is called.

    Kudos!

  • I know thiss if off topic but I’m looking into starting my own blog annd was wondering what alll iis needed to get seet up?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web savvy sso I’m not 100% sure.
    Any suggestions or advice would be greatly appreciated.
    Cheers

  • Having read this I thought it was very enlightening.
    I appreciate you finding the time and energy to put this information together.
    I once again find myself spending way too much time both reading and posting comments.
    But so what, it was still worthwhile!

  • robert

    Organic SEM is more extended phrase for efficient SEO solutions which includes marketing of email, on the internet marketing, outcomes of company, support of google and classified ads. here are the findings

  • Robert

    You type these search phrases into the automatic writing a blog application during the act of setting up each weblog. serruriers

  • Rahul Bhanushali

    This is a great article. Thank you for this beautifully written post.
    I have created a similar skeleton along firebase which is quite popular now.
    Github link: https://github.com/rahulbhanushali/backbone-firebase-jquerymobile-skeleton

  • Pingback: AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only - TecHub()

  • 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.

  • 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.

  • Karie Chapel

    Savvy discussion ! BTW , if your business has been looking for a a form , my colleague filled a template form here http://goo.gl/3yficL.

css.php