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

【问题标题】：Using jQuery in Play Framework WebJars sample app在 Play Framework WebJars 示例应用程序中使用 jQuery
【发布时间】：2014-10-27 20:49:49
【问题描述】：

我正在使用Typesafe Activator 1.2.10 并尝试使用WebJars Sample for Play 2.x。我查看了应用程序模板并阅读了Bootstrap 依赖于 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

最后我在app/assets 中打开index.coffee 脚本并在这里尝试：

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

终于胜利了！但是将我所有的 jQuery 代码写在一个外部文件中真的很讨厌。如何让 jQuery 在 HTML 模板中工作？如何封装代码，使其仅在 jQuery 加载 RequireJS 后执行？谢谢！

【问题讨论】：

标签： jquery playframework requirejs webjars

【解决方案1】：

使用 WebJars 进行依赖管理会将传递依赖项拉入项目中，但这并不意味着它们会神奇地加载到页面中。因此，如果您想使用 jQuery，那么您需要加载它。您可以使用 WebJars 中的 RequireJS 支持来加载传递依赖项（如您所见）。如果您只想将 jQuery 加载到您的 index.scala.html 页面中，请执行以下操作：

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

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

【讨论】：