How to use jQuery Mobile and Backbone JS together in one app?

Question

I've been enjoying using Backbone JS for a iPad HTML5 project... But I'm quickly running into a issue of needing iPad-ish transitions, form elements etc. After looking around, it seems jQuery Mobile is the most established. We use jQuery anyhow.

But one thing I quickly ran into was the hash events/ajax stuff of the two libraries quickly didn't work. Because jQuery Mobile takes care of loading in pages, and doing the transitions etc, it was not letting my Backbone Controller routes work as they did before. It seemed that the two aren't actually that compatible?

After some work though, I have a basic workaround... Using the page loading events stuff in jQuery Mobile to see the active page it's on and then fire the correct Backbone View that goes with that page. Basically doing away completely with Backbone's hash listening/routes/controller.

But this still doesn't seem right? How can Backbone JS and jQuery Mobile work seamlessly together? How do I do this right, moving forward?

Answer 1

I think I found a solution when I asked the same question.

Disable the hash change controller in JQuery mobile UI and replace with backbone.js

There looks to be an option to disable JQuery hash change listening on a recent checking.

https://github.com/jquery/jquery-mobile/commit/3162428558efd9960739ef8f00a7ead0dbf6d3ec

I have not tried it yet though. If it works please let us know.

Brad