Question

我正在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 /筹码，我想要运行另一组函数。

除了检查脚本中的当前页面url并执行基于该功能的函数之外，我无法看到这样做的简洁方法，但是路径文件已经根据当前页面网址进行了操作 - 两次这么相似的事情似乎很奇怪。

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

Answer 1

您可以在... documentation中找到非常漂亮且清晰的样本。

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

Answer 2

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

默认的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: _*)
}

然后我有两个模板标签：

<强> styles.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) {

}

Answer 3

您可以将特定于页面的javascript作为模板参数link

传递

Play中的页面特定javascript

3 个答案: