Javascript 特定于页面的Java脚本正在使用中_Javascript_Playframework_Playframework 2.0

Javascript 特定于页面的Java脚本正在使用中

javascript playframework playframework-2.0

Javascript 特定于页面的Java脚本正在使用中,javascript,playframework,playframework-2.0,Javascript,Playframework,Playframework 2.0,我正在构建一个小型应用程序，其中有一个“外部”模板，用于保存所有CSS和JS导入（jQuery和main.JS文件）。CSS在顶部，JS在底部，中间有一个body标签。。。非常基本的东西： <html> <head> <title>test</title> <link rel="stylesheet" href="@routes.Assets.at("stylesheets/foundation.cs

我正在构建一个小型应用程序，其中有一个“外部”模板，用于保存所有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并基于此执行函数。。。但是routes文件已经在基于当前页面url做一些事情了——似乎很奇怪必须做两次如此相似的事情

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

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

您在

滚动到底部并选中以下部分：更多脚本和更多样式等价物，您已经准备好使用这些示例。

您在

滚动到底部并选中部分：更多脚本和更多样式等价物，您已经准备好使用示例。

我使用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.collection.mutable.Map[String, Int])

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

@(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>

我使用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.collection.mutable.Map[String, Int])

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

@(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>