requirejs modules does not catch pageinit event - jquery-mobile

Question

I am working on an application using jquery mobile and in the process of re-factoring the app into modules with RequireJS. I have almost completed the task but ran into one a problem which I need a little help with.
I am manually loading my script files (jquery, jqm, knockout etc) and define these libraries as the first thin in my main.js file.
(function(){
var root = this
define('jquery', [], function () { return root.jQuery; });
define('ko', [], function () { return root.ko; });
....
})();
Next I load the jquery mobile plugin and boot the application
....
require([
'Scripts/lib/mobile/jquery.mobile-1.2.0'
], function () {
$(document).on('pageinit' function(){ alert('page init event triggere'); });
boot();
});
My problem is that 'pageinit' event is already triggered by the time requirejs executes factory function, which attaches to the event. Subsequent pageinit events are catched as expected but im missing the initial one when the app first loads. If I move the event binding out of the require module it works fine. Any ideas how I register and handle these jqm events?
Thanks in advance.

Answer 1

I had the same problem and I found that you shouldn't load jquery mobile module as a global dependency, but directly in the core of the function :
require(["jquery"], function($) {
console.log("requireJS loaded");
require(["jquery.mobile"]);
$( document ).on( 'pagecreate pageinit pageshow', '#mappage', function( event ) {
var eventType = event.type;
switch(eventType) {
case 'pagecreate':
console.log("mappage : pagecreate");
break;
case 'pageinit':
console.log("mappage : pageinit");
break;
case 'pageshow':
console.log("mappage : pageshow");
break;
};
});
});