What I expect it to do: Load the page from my .html file, wrap it in a data-role="page" div and then let jQuery Mobile to the rest (aka display it).
What it actually does: Well, nothing. The page injecting part works fine and I can see my page in the DOM. However jQM doesn't display it.
It works when I add a $.mobile.changePage(hash) after appending it to the page, but I cant do this when the page has already been loaded or I would get an endless loop (since changePage calls pagebeforechange). The html files just contain the inner part of a page btw (data-role="content etc).
Over the last few weeks I've tried to figure out what is the best way to develop a app with jQuery mobile & Cordova/PhoneGap.
So far I plan to use the following tools and libraries:
- Knockout.js for MVVM
- Require.js for managing all scripts
- jquerymobile-router for routing
Thats what I've come up with so far:
index.html -> loading all the scripts and the start page
views/ -> all the views
models/ -> all the (view)models
On a request, I use preventDefault() in the router configuration to prevent JQM from doing anything and then I read the contents of the page from my view and inject them into the current page, apply the view model and put my new url into window.location.href.
This approach seems to be flawed. A view model would look like this:
define(function ($) {
// fill viewModel
return viewModel;
}
Then I load it through require.js and apply the view model with knockout. Now, what if I use ajax calls in the view model? Then this wouldn't work without setting async to false (which is a bad Idea it seems). Or I could use a callback, but I'm not even sure how I would do this and if it's a good idea.
It would be great if you could give me some feedback, if my approach is a good idea so far and how I could solve the problem with the ajax calls at best. Thanks a lot!