堆栈内存溢出
  繁体   English   中英

加<script> to the <head> from scala template tags in Play Framework 2

[英]Add <script> to the <head> from scala template tags in Play Framework 2

 原文  2013-09-11 09:47:51  1   4    java/ javascript/ playframework/ playframework-2.0/ playframework-2.1

问题描述

我想从标签内添加javascript到我的网页的<head> 。

这是我在我的网页上使用的更多脚本：

main.scala.html 

@(title: String, scripts: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>@title</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        @scripts
    </head>
    <body>
        @content
    </body>
</html>

page.scala.html 

@scripts = {
    <script type="text/javascript">
        $(document).ready(function() {
            alert(1);
        });
    </script>
}
@main("Title", scripts) {
    <p>page content</p>
}

到现在为止还挺好！ 但是我想在我编写的标签（组件）中做同样的事情，需要在网页中包含一些javascript代码。

我的问题是如何将<script>元素从标记传递到main.scala.html ？

所以page.scala.html将是：

page.scala.html 

@import tags._
@main("Title") {
    @mytag("green")
}

mytag.scala.html 

@(color: String)
<script type="text/javascript">
    $(document).ready(function() {
        alert('@color');
    });
</script>

<p>Some more content</p>

在这种情况下， <script>标记在HTML页面的中间呈现，我想将<script>标记传递给@scripts变量，以便它可以在<head>标记内呈现。

4 个解决方案

解决方案1
 4 已采纳  2013-09-12 09:20:28

好的，我想出了一个更好的解决方案恕我直言。

我创建了以下标记：

script.scala.html 

@(content: Html)
@{
    var additionalScripts = ctx().args.get("additionalScripts").asInstanceOf[List[Html]];
    if(additionalScripts == null) {
        additionalScripts = new ArrayList[Html]();
        ctx().args.put("additionalScripts", additionalScripts)
    }

    val added = additionalScripts.add(content);
}

renderscripts.scala.html 

@additionalScripts = @{ctx().args.get("additionalScripts").asInstanceOf[List[Html]]}
@if(additionalScripts != null) {
    @for(additionalScript <- additionalScripts) {
        @additionalScript
    }
}

在main.scala.html您可以使用： 

@(title: String)(content: Html)
@import tags._
<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>@title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        @renderscripts()
    </head>
    <body>
        @content
    </body>
</html>

您可以使用以下命令在模板或标签中指定其他脚本： 

@import tags._
@script {
    <script type="text/javascript">
        $(document).ready(function() {
            alert('This will be in the head!');
        });
    </script>
}

这很好，对吧？ :)

也许有人可以使用他们的Scala魔法来清理或增强我的代码:)

解决方案2
 0  2013-09-11 19:47:55

这是可行的，但我同意ajozwik，并说你的脚本内联将更容易，应该仍然可以正常工作。

你可以做的是添加另一个参数组，基本上是另一个(content:Html)到你的主模板，这将呈现使用mytag生成的<script>标签。

main.scala.html 

@(title: String, scripts: Html = Html(""))(content: Html)(implicit mytagScripts: Html = null)
<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>@title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    @scripts
    @mytagScripts
  </head>
  <body>
    @content
  </body>
</html>

在您使用mytag任何视图上，您​​需要定义mytagScripts的值。 它是隐含的，因此您不必在不使用它的模板上定义它，它只使用默认值。

除了需要生成<script>并将其存储以供以后使用之外，您的标记模板不会发生太大变化。 我们可以使用Context.args映射。

mytag.scala.html 

@(color:String)
@{ctx().args.put("mytagScriptHtml", new Html("<script>alert('" + color + "');</script>"))}
<div>
  <!-- whatever else you're tag is generating -->
</div>

最后，你的页面看起来像这样。 注意第二组花括号，它是在主模板上定义mytagScripts的。 组之间的关闭/打开括号必须在同一行上，否则您将收到编译器错误。

page.scala.html 

@import tags._
@main("Title") {
  @mytag("green")
} {
  @ctx().args.get("mytagScriptHtml")
}

简化示例...如果您希望在页面中多次使用该标记，则需要跟踪List中的<script>标记或其他内容。 同样的概念，因为您可以在Context.args存储任何Object 。

解决方案3
 0  2013-09-12 08:02:48

为什么不直接将mytag传递给main ：

page.scala.html ： 

@import tags.html.mytag
@main("Title", mytag("green")) {
    <p>page content</p>
}

解决方案4
 0  2016-02-16 09:51:59

我在Play-scala 2.4中做了类似的事情，但是在主体关闭标签之前有脚本进入页脚。 我不熟悉Play的java api，但我相信这个概念仍然有用。

这是要点： https ： //gist.github.com/zv3/2dad7cb63813e82f8412

控制器/ StackableAction.scala 

// Borrowed from: https://github.com/rabitarochan/Play2-ChainAction/blob/master/core/src/main/scala/com/github/rabitarochan/play2/stackableaction/StackableAction.scala
abstract class StackableAction extends ActionBuilder[RequestWithAttributes] with StackableFilter {

  override def filter[A](request: RequestWithAttributes[A])(f: RequestWithAttributes[A] => Future[Result]): Future[Result] = {
    f(request)
  }

  def invokeBlock[A](req: Request[A], block: RequestWithAttributes[A] => Future[Result]): Future[Result] = {
    val reqWA = new RequestWithAttributes(req, new TrieMap[AttributeKey[_], Any]())
    filter(reqWA)(block)
  }

}

trait StackableFilter {
  def filter[A](request: RequestWithAttributes[A])(f: RequestWithAttributes[A] => Future[Result]): Future[Result]
}

trait AttributeKey[A] {
  def ->(value: A): Attribute[A] = Attribute(this, value)
}

case class Attribute[A](key: AttributeKey[A], value: A) {
  def toTuple: (AttributeKey[A], A) = (key, value)
}

class RequestWithAttributes[A](request: Request[A], attributes: TrieMap[AttributeKey[_], Any]) extends WrappedRequest[A](request) {
  def get[B](key: AttributeKey[B]): Option[B] = attributes.get(key).asInstanceOf[Option[B]]
  def set[B](key: AttributeKey[B], value: B): RequestWithAttributes[A] = {
    attributes.put(key, value)
    this
  }
  def getAll[T](implicit classTag: ClassTag[T]) = {
    attributes.filterKeys {
      case p: T => true
      case _    => false
    }
  }
}

意见/支持/ JavascriptPage.scala 

object JavascriptPage {
  case class NonBlockingJS(key: String) extends AttributeKey[Html]
  case class BlockingJS(key: String) extends AttributeKey[Html]

  def addNonBlockingJS(div: String)(jscript: Html)(implicit request: Request[_]): Unit = {
    request match {
      case i: RequestWithAttributes[_] =>
        i.set(NonBlockingJS(div), jscript)
      case _ =>
    }
  }

  // scripts that are supposed to go into the <head> tag, thus blocking scripts
  def addBlockingJS(div: String)(jscript: Html)(implicit request: Request[_]): Unit = {
    request match {
      case i: RequestWithAttributes[_] =>
        i.set(BlockingJS(div), jscript)
      case _ =>
    }
  }

  // scripts that are supposed to go before the </body> tag, non blocking scripts that is
  def getNonBlockingJS()(implicit request: Request[_]): Seq[(String, Html)] = {
    request match {
      case i: RequestWithAttributes[_] =>
        i.getAll[NonBlockingJS].toSeq.map {
          case (NonBlockingJS(div), jscript: Html) => (div, jscript)
        }
      case _ => Seq.empty
    }
  }
}

inlineNonBlockingJS.scala.html 

@import views.support.JavascriptPage
@(implicit request: Request[_])
<script src="/javascripts/your_javascript_app.js"></script>
<script id="non-blocking" type="text/javascript">
  @defining(JavascriptPage.getNonBlockingJS()) { scripts =>
    @scripts.map { case (_, item) => @item }
  }
</script>

它基本上将请求（使用play的动作组合）包含在一个案例类中，该案例类具有TrieMap作为其成员之一，然后它将作为与请求关联的额外属性的持有者，并且这些属性可以是javascript条目和几乎您希望在请求期间拥有和分享的任何其他内容。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Scala模板中的if语句播放框架 播放框架：scala模板，如果语句发出 在Play Framework中的变量中获取Scala模板 转义Java Play框架Scala模板中的HTML 从Spring框架迁移到Play框架（Scala） 如何在Play Framework的头部和正文部分添加HTML内容？ 如何在Java Play框架的Scala模板中编写Java代码 在Scala模板-Play框架中导入子类 Play framework 2.1.3函数将使用给定参数呈现scala模板 在Play 2框架的Scala模板页面中如何显示pdf文件？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM