1

Typesafe Activator 1.2.10を使用して、 Play 2.xの WebJars Sample を試しています。アプリケーション テンプレートを調べて、Bootstrap は jQuery に依存していることを確認しました。したがって、Bootstrap を依存関係として指定すると、jQuery も取得されます。テストページで。

OK、これで jQuery が利用可能になったと思います。次の最小限のコードをindex.scala.html(内部<div class="container">)に追加して試してみましょう。

<script type="text/javascript">
  $('.container').hide();
</script>

いいえ、Safari はReferenceError: Can't find variable: $. Safari のコマンド ラインで同じコードを試してみると、うまくいきます。そのため、jQuery はすぐには読み込まれませんが、しばらくすると読み込まれます。

RequireJSの使用法について読んで、次のことを試してください。

<script type="text/javascript">
  require(["jquery"], function() {
    $('.container').hide();
  });
</script>

Safari から次のエラーが表示されるようになりました。

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.js, line 0)
[Error] Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror

最後に、index.coffeeスクリプトを開き、app/assetsここで試します:

require ["bootstrap"], () ->
  console.log "boostrap javascript loaded"
  $('.container').hide()

ついに勝利！しかし、私のすべての jQuery コードを外部ファイルに書き込むのは本当に不快です。HTML テンプレートで jQuery を機能させるにはどうすればよいですか? jQuery が RequireJS で読み込まれた後にのみ実行されるように、コードをカプセル化するにはどうすればよいですか? ありがとう！

4

1 に答える 1