0

require.jsを使用して、ホバー付きのドロップダウンメニューにCWSpearのプラグインを利用しようとしていました。しかし、「エラー：スクリプトエラー」というエラーが表示され続けます。これをrequire.jsで使用するには何をする必要がありますか?

編集：

質問に焦点を合わせて@jakeeを支援するために、これは私が作成した構成です:

requirejs.config({
    paths: {
        "myBootstrap": _myBootstrappingPath + "js/bootstrap",
        "myControllers" : _myBootstrappingPath + "js/controllers", 

        //jquery
        "jquery": _libsPath + "jquery/1.9.1/js/jquery",
        "jquery_validate": _libsPath + "jquery/validate/1.12.0/js/jquery.validate",

        //Bootstrap related
        "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",
        "select2" : _libsPath + "select2/3.3.2/select2", 

        //misc
        "underscore": _libsPath + "underscore/1.4.4/js/underscore",
        "backbone": _libsPath + "backbone/1.0.0/js/backbone",

        "backbonePageable": _libsPath + "backbone/backbone-pageable/1.2.0/js/backbone-pageable",
        "backgrid": _libsPath + "backgrid/0.2.0/backgrid",
        "backgridAssets": _libsPath + "backgrid/0.2.0/assets/js",
        "backgridExtensions": _libsPath + "backgrid/0.2.0/extensions",

        //plugins and extensions                                                  
        "plugins_datetimepicker": _pluginsPath + "/datetimePicking/bootstrap-datetimepicker",   
        "plugins_dropdownHover": _pluginsPath + "/dropdownHover/dropdownHover",
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },    
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },  
        'select2': ["jquery"],
        'backgrid': {
            deps: ["jquery", "backbone"],
            exports: "Backgrid"
        },
        'backbonePageable':  {
            deps: ["jquery", "underscore", "backbone"],
            exports: "PageableCollection",
            init: function(nhonho){
                Backbone.PageableCollection = PageableCollection;
            }
        },
        plugins_datetimepicker: {
            deps: ["jquery", "bootstrap"]
        },
        plugins_dropdownHover: {
            deps: ["jquery", "bootstrap"]
        }   
    }
});

そしてそれを使用します：

(function (bs) {

    require(["jquery", 
        "twitterBootstrap", 
        "select2", 
        "plugins_datetimepicker", 
        "plugins_dropdownHover", 
        "myControllers/defaultController"], function ($) {

        var defaultCtrlr = new ticket.defaultController(bs);

        bs.onInit();
        defaultCtrlr.start(bs.options);
        bs.onReady();
    });                    


})(window.my.bootstrap);

行をコメントしている限り"plugins_dropdownHover"、定義で、正常に動作します。そのスクリプトを読み込もうとすると、失敗します。

4

2 に答える 2

1

AMD の方法またはshim configを介して、RequireJS で実際に使用できるものは何でもあります。

まず、モジュールが AMD と互換性があるかどうかを確認します。チェックするのに最適な場所はソース コードです。RequireJS では、すべての AMD モジュールが -function で宣言されdefineます。ソースに上記の関数への参照がない場合は、ライブラリ/プラグイン/その他がそのままでは AMD をサポートしていないことを確認できます。が存在する場合defineは、構成で宣言するだけでファイルをインポートできますpaths。

ありがたいことに、RequireJS を使用するとshim、コンテンツを宣言していない JavaScript ファイルを .NET 経由で AMDable にすることができますdefine。基本的には、ファイルの依存関係とオブジェクトに何を挿入する必要がwindowあるかを指定すると、RequireJS は事前に dep をロードし、後で結果を取得するようにします。

paths: {
  'otherlib': 'path/to/otherlib',
  'mylib': 'path/to/mylib' // define alias for mylib
}
shim: {
  'mylib': {
     deps: ['otherlib'],
     exports: 'MyLib'
   }
}

ロードしようとしているファイルは jquery プラグインであるため、エクスポートなどは必要ありません。プラグインはその内容を$. RequireJS は、この良い例を提供します 

"shim": {
  "jquery.someplugin": ["jquery"],
  "jquery.otherplugin": ["jquery"]
}

注意！baseUrlこの例では、jquery とプラグインを含むディレクトリへのポイントとしてエイリアスを使用する必要がないように、RequireJs が構成されています。

お役に立てれば！

于 2013-06-26T08:29:15.583 に答える