Question

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

Answer 1

Have solved it by myself now by converting jquery.mobile.iscrollview to a AMD module. Like so:

 define(function () {


    function iScrollView($) {
        //here comes the iscrollview code, but without event handler to pagecreate
    }

    jQuery(document).bind("pagecreate", function (e) {
        "use strict";
        iScrollView(jQuery); //this is doing the init stuff that normally happens
                             //when script is loaded, lines after this are the 
                             //original event handler

        var elements = jQuery(e.target).find(":jqmData(iscroll)");
        elements.iscrollview();
    });

    return iScrollView;

});