1

jquery、jquery mobile、requireJS (2.0) を使用した作業プロジェクトがあります。jquery.mobile.iscrollview を requireJS の世界に統合する際に問題が発生しました。

私の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));

これは、1 つの大きな JS ファイルのみをクライアントに提供するプロダクション モードで requireJS オプティマイザが実行されていない限り、非常にうまく機能しています。オプティマイザーを何も最適化しない (最適化: なし) に設定しても、すべての js ファイルを連結するだけで、機能しません。

サイト読み込み時のエラーメッセージは

キャッチされていない TypeError: 未定義のプロパティ 'ignoreContentEnabled' を読み取ることができません

これはファイル「jquery.mobile.iscrollview.js」で発生し、コードから明らかなように、ファイルの解析時には $.mobile オブジェクトがまだ使用できないことがわかります。これは、jquery ready イベントの後にのみ作成されるためです (I考える）。

これを修正する方法はありますか？

ありがとう！

マルコ

4

2 に答える 2

2

jquery.mobile.iscrollview を AMD モジュールに変換することで、自分で解決しました。そのようです：

 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;

});
于 2013-02-01T07:53:20.040 に答える
0

ここで問題になる可能性があるのは、jQuery コアの読み込みと実行のタイミングです。(これが、私が個人的に CurlJS を好む理由です。タイミングの問題は一度もありませんでした)

それでも、設定システムの難しさにがっかりしている場合は、自分で制御して、順序を明示的に宣言してください。

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

「瞬間」が何であるかわからないので、シム構造に基づいて、何にも依存しないので最後に置いてください。

于 2013-02-01T01:05:46.280 に答える