1

我正在 Play 中构建一个小型应用程序，并有一个“外部”模板，其中包含我所有的 CSS 和 JS 导入（jQuery 和我的 main.js 文件）。CSS在顶部，JS在底部，中间有一个body标签......非常基本的东西：

<html>
    <head>
        <title>test</title>

        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/foundation.css")">
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/main.css")">

        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    </head>

    <body>
        @content
    </body>

    <script src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")' type="text/javascript"></script>
    <script src='@routes.Assets.at("javascripts/index.js")' type="text/javascript"> </script>
</html>

这很好。

但是，我有页面特定的 javascript 函数，这些函数应该根据页面的内容运行。因此，如果我访问 localhost:9000/test，我希望运行一组特定的函数。如果我去 localhost:9000/chips，我想运行另一组函数。

我真的看不到这样做的好方法，除了检查脚本中的当前页面 url 并基于它执行函数......但是路由文件已经在根据当前页面 url 做一些事情 - 看起来很奇怪必须做两次如此相似的事情。

一种解决方案是将我的所有脚本放在顶部，然后在 HTML 中执行内联脚本......但我讨厌这样做。

4

3 回答 3

4

您在...文档中有非常好的和清晰的示例。

滚动到底部并检查部分：moreScripts 和 moreStyles 等效项，您已经准备好使用示例。

于 2013-05-01T20:10:28.550 回答
1

我使用 ViewModel 方法来解决这个问题。

默认视图模型：

class DefaultPage(
  implicit val request: RequestHeader,
  implicit val lang: Lang) {

  var title: String = null
  val styles = mutable.LinkedHashMap.empty[String, Int]
  val scripts = mutable.LinkedHashMap.empty[String, Int]

  def title(title: String) {
    this.title = title
  }

  def style(style: String)(implicit priority: Int = 500) {
    styles.put(style, priority)
  }

  def script(script: String)(implicit priority: Int = 500) {
    scripts.put(script.toString, priority)
  }

  def translate(message: String, objects: Any*) = Messages(message, objects: _*)
}

然后我有两个模板标签：

样式.scala.html

@(styles: scala.collection.mutable.Map[String, Int])

@for(style <- styles.toList.sortBy(_._2)) {
  <link rel="stylesheet" href="@routes.Assets.at(style._1)" />
}

scripts.scala.html

@(scripts: scala.collection.mutable.Map[String, Int])

@for(script <- scripts.toList.sortBy(_._2)) {
  <script async="true" src="@routes.Assets.at(script._1)"></script>
}

我的主要模板：

main.scala.html

@(page: util.view.models.DefaultPage)(content: Html)

@import tags.scripts
@import tags.styles

@page.style("css/vendor/normalize.min.css")(1)
@page.style("css/vendor/formalize.min.css")(1)
@page.style("css/sprites.min.css")(1)
@page.style("css/main.min.css")(1)
@page.style("css/quirks.min.css")(1000)
@page.script("js/vendor/jquery-1.9.1.min.js")(1)
@page.script("js/vendor/jquery.formalize.min.js")(1)
@page.script("js/plugins.min.js")(1)
@page.script("js/main.min.js")(1)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>@page.title</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width" />

        @styles(page.styles)
        <script src="@routes.Assets.at("js/vendor/modernizr-2.6.2.min.js")"></script>
    </head>
    <body class="@page.lang.code @page.lang.language @page.lang.country">
        @content
        @scripts(page.scripts)
    </body>

还有一个子模板：

@(page: util.view.models.ContactUsPage)

@page.title(page.translate("contact.us.title"))
@page.style("css/contact-us.min.css")
@page.script("js/vendor/jquery.expandable-1.1.4.js")
@page.script("js/contact-us.min.js")
@main(page) {

}
于 2013-05-02T08:53:13.200 回答
0

您可以将特定于页面的 javascript 作为模板参数链接传递

于 2013-05-01T19:04:51.023 回答