22

私はjsを必要とするのは初めてで、問題はjQueryプラグインをロードする方法を本当に理解していないことです.

複数のプラグインをロードしたいのですが、選択したプラグインで最初のプラグインにすでに問題があります

js

//site full url
var siteUrl = window.location.protocol+"//"+window.location.host + "/";

requirejs.config({
    baseUrl: siteUrl + "assets/js",

    paths: {
        "jquery": "libs/jquery",
        "jquery-ui": "libs/jquery-ui",
        "bootstrap": "libs/bootstrap",
        "scripts": "scripts",
        "plugins": "plugins",
    }, 
});

requirejs(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'],
function($, chosen){
    $('.chzn-select').chosen();
});

私のテストhtml

<select data-placeholder="Choose a country..." style="width:350px;" class="chzn-select">
    <option value="">Test</option>
    <option value="">Test</option>
    <option value="">Test</option>
</select>

ロードしようとすると、次のエラーが表示されます

TypeError: $ is not a function


...tion(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self...

bootstrap.js (line 6)

TypeError: $(...).chosen is not a function


$('.chzn-select').chosen();

誰かが私が間違っていることを指摘してもらえますか?

4

2 に答える 2

42

依存関係をロードするとき、requirejs はそれらをすべて同時にロードします。このエラーが発生した場合は、jQuery が読み込まれる前にプラグインが読み込まれて実行されていることを意味します。プラグインがすでに読み込まれている jQuery に依存していることを requirejs に伝えるために、shim をセットアップする必要があります。

また、ほとんどの jQuery プラグインは AMD に対応していないため、requirejs に、スクリプトが正しくロードされたことを伝えるために何を探すべきかを伝えたいと思うでしょう。これは、シムの「エクスポート」エントリで実行できます。

jqueryUI も AMD に対応しているとは思えないので、おそらく shim にエントリを追加する必要があります。私はブートストラップを使用していないので、そこに何かが必要かどうかはわかりません。

プラグインと jQueryUI の shim を次に示します。これを requirejs.config への呼び出しに追加します。

shim: {
    'plugins\chosen': {
        deps: [ 'jquery' ],
        exports: 'jQuery.fn.chosen'
    },
    'jquery-ui': {
        deps: [ 'jquery' ],
        exports: 'jQuery.ui'
    }
}

まだ見えていない問題がいくつかあるかもしれませんが、これで少なくとも前進できるはずです。また、これはおそらく読む価値があります: http://requirejs.org/docs/api.html#config-shim。まだ読んでいない場合は、そのページ全体を読むことをお勧めします。

于 2013-02-07T17:28:36.103 に答える