负载jquery.mobile。与requirejsiscrollview优化器-Loadjquery.mobile.iscrollviewwithrequirejsoptimizer

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.

我有一个使用jquery、jquery mobile和requireJS(2.0)的工作项目。现在我有一个整合jquery.mobile的问题。让我们进入到requireJS的世界。

My requirejs configuration looks like this:

我的requirejs配置是这样的:

(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.

这很好，只要requireJS优化器没有运行在生产模式下，只有一个大JS文件应该提供给客户端。即使在设置优化器时，也不能优化任何东西(优化:none)，所以它只会将所有js文件整合在一起，而不是工作。

The error message when loading the site is

加载站点时出错信息。

Uncaught TypeError: Cannot read property 'ignoreContentEnabled' of undefined

未捕获的类型错误:无法读取未定义的属性“ignoreContentEnabled”。

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).

它发生在文件“jquery.mobile.iscrollview”中。和它从代码中显而易见的$。在解析文件时，移动对象还没有可用，因为只有在jquery就绪事件(我认为)之后才创建。

Any idea how to fix this?

你知道怎么解决这个问题吗?

Thanks!

谢谢!

Marco

马可

2 个解决方案

 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;

});

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'
    }
});

require(["jquery"], function($){
    require(["angular", "jquery.mobile"], function(angular){
        require(["adapter","iscroll"], function(){
            require(["myApp","moment","iscrollview"], function(myApp){
                // do something with
                myApp, $, angular
            })
        })
    })
})