在Play Framework WebJars示例应用程序中使用WebJars

Question

我正在使用Typesafe激活剂1.2.10并试用播放2.x的WebJars示例。我查看了应用程序模板，并根据jQuery读取引导程序。因此，当您将Bootstrap指定为依赖项时，您也会得到jQuery。在测试页面中。

好的，我想我现在可以使用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代码是非常讨厌的。如何使jQuery在HTML模板中工作？如何封装代码，使其仅在jQuery加载RequireJS之后才能执行？谢谢!

Answer 1

使用WebJars进行依赖关系管理会将传递的依赖项拖到项目中，但这并不意味着它们会神奇地加载到页面中。因此，如果您想使用jQuery，那么需要加载它。您可以使用RequireJS支持在WebJars中加载传递依赖项(正如您发现的那样)。如果您只想将jQuery加载到您的index.scala.html页面中，那么请执行以下操作：

<script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>

WebJars文档中的更多细节：http://www.webjars.org/documentation