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?

Solution 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

Solution 2

It seems that the JQuery Mobile team has made a conscious decision to not support the sort of dynamic applications the Backbone.js targets. From the alpha 4 release notes:

After 1.0 is out, the project be focusing on ... dynamic applications, expanded widget set, and ... A more detailed roadmap is underway and we’ll share it as we get closer to our 1.0 release.

Further evidence for this is the removal of the autoInitialize option as they went from alpha 3 to alpha 4: issue 1391

So for now, we need workarounds. An alternative answer is to help fix outstanding JQM bugs and push it closer to 1.0, so we can get dynamic application features into JQM ASAP.

Solution 3

i prefer something more integrated w/ jquery mobile, so i usually replace backbone's router with this one: github.com/azicchetti/jquerymobile-router . works nicely

Comments

[littlejim84]

That is very interesting and is actually exactly what I was after. Thank you!

[bradgonesurfing]

@littlejim84 did you get a chance to try out the above suggestion. I'm stepping out soon to make another mobile app and would really like to know if the above works well.

[Andreas Köberle]

Note that you have to set linkBindingEnabled to false in version 1.0 jquerymobile.com/demos/1.0/docs/api/globalconfig.html