Single page app with require.js and knockout

Single page app with require.js and knockout

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:
  1. define(function ($) {
  2.  // fill viewModel
  3.  return viewModel;
  4. }
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!
    • Topic Participants

    • info