13

RequireJS を CMS に統合しているので、これをページ テンプレートの下部に配置しました。

<html>
<body>
  {Placeholder1}
  <script src="scripts/require.js" data-main="scripts/main"></script>
  {Placeholder2}
</body>
</html>

次に、各ページで、RequireJS を活用する関数を作成したいと思います。だから私はこれをページの一番下に置いてみました：

<html>
<body>
    <h1>Home</h1>
    <div class="slider">Slider content</div>

    <script src="scripts/require.js" data-main="scripts/main"></script>

    <script type="text/javascript">
      require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
    </script>
</body>
</html>

しかし、jquery、utils、slider js ファイルで 404 が発生します。私が持っている main.js 構成を読み取っていないようです:

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.1.min',
        utils: 'libs/utils',
        slider: 'libs/jquery.slider.min'
    },
    shim: {
        slider: ['jquery']
    }
});

require([ 'utils' ], function (utils) {
    utils.init();
});

ページ ヘッドに RequireJS と main を読み込んでみましたが、一貫性のない結果が得られました。jquery、utils、およびスライダーが時間内に読み込まれる場合と読み込まれない場合があります。ページの下部にあるインラインの「require」は、ページ上のメインの RequireJS または依存関係ルールを認識していないかのようですが、私のブレークポイントは main.js でヒットするため、呼び出されていることがわかります。main.js が非同期に読み込まれるのに、ページの下部にあるインラインの "require" ブロックがページ レンダリングで読み込まれるためですか? どうすればこれを回避できますか?

以前に RequireJS を正常に使用したことがありますが、CMS は使用していません。私は常に「定義」を使用し、モジュールを常に非同期で呼び出していましたが、このように RequireJS 関数をインラインで呼び出す必要はありませんでした。これを行う正しい方法に関するアイデアはありますか?

4

2 に答える 2

12

ここで重要なことは、モジュールが要求される前に構成オプションが設定されることです。あなたが正しく特定したように、構成オプションがmain.js時間内にロードされないことを意味する競合状態があります。require.js最も簡単な方法は、スクリプトがロードされる前に構成オプションをインラインに配置することです。

<script>
var require = {
    baseUrl: <?= $someVar ?>,
    paths: {
        // etc
    }
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>

ページのさらに下：

<script>
    require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
</script>

RequireJS は複数のページと部分ビューでどのように機能しますか?も参照してください。

于 2012-10-04T08:03:24.727 に答える
6

インラインのrequireがすぐに呼び出されている間に、main.jsが非同期にロードされているようです。これが、一貫性のない結果が存在する理由です。解決策は、data-main 属性を使用せず、require.js スクリプト タグの下のスクリプト タグを介して main.js ファイルを呼び出すことです。

そこでこれを行うことで、ロードされた main.js ファイルから baseUrl を決定できます。

//DETERMINE BASE URL FROM CURRENT SCRIPT PATH
var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'));

//CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS
require.config({
    baseUrl: baseUrl,
....
于 2012-10-02T21:03:15.417 に答える