jquery-mobile backbone.js routing

Question

I have a backbone.js / jquery mobile app:

when i make a GET to mydomain.com/#map, then jquery executes "/" and then loads #map.

because "/" is triggered first, all backbone.js scripts are loaded including the backbone.js routes in my map-controller.js ("map": "functionForMapRoute"). since the URL contains /#map, the backbone.js route "map" gets triggered before jquery mobile has rendered the dom.

so "functionForMapRoute" can´t operate on divs cause the DOM isn´t fully loaded at this point.

how can i ensure, that the "map" route is triggered not until the DOM is fully loaded?

Answer 1

use something more integrated with jquery mobile, for instance jquerymobile-router (you can find it on github). It replaces backbone's router and it's to be used with jquery mobile and backbone.js or spine.js

Answer 2

I figured out that if you dont use "/" in backbone router it will do fine.

e.g.:

use

"category-:id": "category"

instead of this

"category/id/:id": "category"

I guess thats why they used same concept in the official tutorial :P http://jquerymobile.com/test/docs/pages/Backbone-Require/js/routers/mobileRouter.js

"category?:type": "category"

Answer 3

I had the same issue, and here is the solution to avoid using jquerymobile-router : Backbone.js and jQueryMobile routing without hack or other router