I have a working project with jquery, jquery mobile and requireJS (2.0). Now I have a problem with integrating jquery.mobile.iscrollview into the requireJS world.
My requirejs configuration looks like this:
(function (require) {
"use strict";
require.config({
paths:{
'angular':'../external-libs/angular-1.0.3',
'jquery':'../external-libs/jquery-1.7.2',
'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
'moment': '../external-libs/moment-1.6.2.min',
'iscroll': '../external-libs/iscroll',
'iscrollview': '../external-libs/jquery.mobile.iscrollview'
},
shim:{
'angular':{ deps:['jquery'], exports:'angular' },
'iscroll':{ deps:['jquery'], exports:'iscroll' },
'iscrollview':{ deps:['jquery.mobile', 'iscroll'], exports:'iscrollview' }
}
});
require([
"jquery",
"jquery.mobile",
"adapter",
"moment",
"iscroll",
"iscrollview",
"myApp"
], function () {
//
});
}(require));
That is working very well, as long as the requireJS optimizer hasn't run for production mode where only one big JS file should be served to clients. Even when setting the optimizer to don't optimize anything (optimize: none) so its only concatinating all js files together, its not working.
The error message when loading the site is
Uncaught TypeError: Cannot read property 'ignoreContentEnabled' of undefined
It happens in the file "jquery.mobile.iscrollview.js" and its obvious from the code that the $.mobile object is not yet available at the time of parsing the file, as that is created only after the jquery ready event (I think).
Any idea how to fix this?
Thanks!
Marco