How can I tell if it's too early or too late to create a $.mobile.Router?
AsaAyers opened this issue · comments
This may not be a bug in jquerymobile-router, but I'm not sure where else to post this.
I'm building an app with RequireJS so that in production all of the javascript files get combined into one. In development by the time my router has loaded everything is ready for me to create my router. If I add any delay to it, the router gets created but it fails to trigger for the first page. In production where all of the files have been combined it's too early to initialize my router. It actually causes an error down in jquery mobile, but a delay of 10ms seems to work, but a delay of 1000ms is too long and I miss triggering the first page.
How can I find this window of opportunity where creating my router will work with the first page?
Hi,
another developer asked just the same thing a coupe of days ago (latest posts):
#12
Unfortunately I don't use require js myself, so I can't be really useful on this subject.
But I can try to explain when it should be invoked so that you can work something out.
The router should be instantiated just after the jquery mobile javascript file is loaded (that is to say, after the jquery mobile code is parsed and executed by the browser).
This is the only way to ensure that when the first pagechange event is dispatched it will be intercepted and "handled" by the router.
I don't know which is the best way to do this with require js.
Now that we're talking about this, may I ask you a question?
Isn't combining multiple js files into a big one troublesome on mobile devices? I know that there are certain cache limits that should be respected in order to speedup page loading on iOS and Android.
Thanks. That looks like the kind of info I was looking for.
As far as mobile devices, my app is going to be run through PhoneGap, so the file may become large but it's only fetching it from the device. I did a quick search and found http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/ they're suggesting you try to keep CSS and Javascript to under 1M. That doesnt' seem to be an issue. I'm combining Underscore, BackboneJS, BackboneJS's Model Binding extension, BackboneJS Deep Model extension, jquery, jquerymobile, jquerymobile router, mustache, RequireJS's text plugin, my templates get inlined, and my application code. All of that when combined and uglified is 239K.
I haven't reached the point of a full deployment yet, but accessing what I have so far over my wifi I don't have trouble on Android or an iPad.
Just in case anyone else wants to do the same thing, I had to modify most of the libraries to cooperate with RequireJS. Some work with other AMDs but aren't compatible with RequireJS.
This is a very good news, I was still keeping my files small for them to be cached.
I would be very grateful if you could find the time to document your findings about this whole stack (requirejs, jquery mobile, backbone, jqm router, etc) and maybe make a pull request to add the documentation (and even a basic example, if you want) to this project.
Thanks!
I'd love to, but it might be a month before I can get back to that due to the schedule for my project. I'm also not sure i'm doing everything the right way yet. I built a PHP/jQuery/JQueryMobile application before, this is the first project with all of the other technologies I listed.
Hi Asa Ayers, I am curious to see what your findings on this topic are. I am trying to get
requirejs, jquery mobile, backbone, jqm router all to work with the latest versions of the libraries. It seems to be failing at the mobile router and claims its undefined. Any insight you have on this one would be a huge help to me.
My solution was to use r.js to optimize everything except jQuery Mobile. Then in my file after I setup the router I call require( [ 'jquery-mobile' ] ). I tried several other things first and nothing else worked consistently.