Correct way of using JQuery-Mobile/Phonegap together?

Question

What is the correct way (to this date) to use JQuery Mobile and Phonegap together?

Both frameworks need to load before they can be used. How can I be sure that both are loaded before I can use them?

Answer 1

You can use deferred feature of JQuery.

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  // TBD
}