【问题标题】:Does Scalatags generate HTML or Javascript?Scalatags 会生成 HTML 还是 Javascript?
【发布时间】:2016-04-05 13:09:14
【问题描述】:

我看到了一些似乎可以生成 HTML 的 Scala 代码...

  def pagePlay: TypedTag[dom.raw.HTMLElement] = div{
    val levels = Array(
      (10, "Easy game; you are allowed 10 misses."),
      (5, "Medium game; you are allowed 5 misses."),
      (3, "Hard game; you are allowed 3 misses.")
    )
    div(
      p("Inspired from ")(a(href:="http://www.yiiframework.com/demos/hangman/", target:="_blank","Yii's demo")),
      p("This is the game of Hangman. You must guess a word, a letter at a time.\n" +
        "If you make too many mistakes, you lose the game!"),
      form(id := "playForm")(
        for((level,text) <- levels) yield {
          val levelId = s"level_${level}"
          div(`class`:="radio")(
            input(id:=levelId, `type`:="radio", name:="level", onclick:={ ()=>
              Model.level() = level
            }, {if(level == Model.level()) checked:="checked"}),
            label(`for`:=levelId, style:="padding-left: 5px")(text)
          )
        }, br,
        input(`type`:="button", value:="Play!", `class`:="btn btn-primary", onclick:={ () =>
          if(Model.level() > 0) {
            Model.start()
            goto(pageGuess)
          }else{
            dom.alert("Please select level!")
          }
        })
      )
    )
  }

^ 这个 ScalaTag 代码实际上是在生成可以被不支持 javascript 的简单网络爬虫读取的 HTML,还是生成的 Javascript 正在修改 DOM 以生成 div 和段落等等?

我尝试阅读文档,但对于 div 和 p 来说,只有“Pattern: div: Tags.this.ConcreteHtmlTag[html.Div]”

【问题讨论】:

    标签: javascript scala scalatags


    【解决方案1】:

    两者都用,至少现在是这样:

    来自文档:

    Although Scalatags was originally a HTML-String generation library, it now
    ships with an additional backend that runs only on ScalaJS.
    

    此外:

    DOM 后端在所有 Scalatags 片段上提供了一个额外的方法 .render,它将片段转换为 DOM 树:

    val elem = div.render
    assert(elem.children.length == 0)
    elem.appendChild(p(1, "wtf", "bbq").render)
    assert(elem.children.length == 1)
    val pElem = elem.children(0).asInstanceOf[Paragraph]
    assert(pElem.childNodes.length == 3)
    assert(pElem.textContent == "1wtfbbq")
    As you can see, you can manipulate DOM elements directly, calling standard DOM APIs like .children, .appendChild, etc.
    

    如您所见,您可以直接操作 DOM 元素,调用标准 DOM API,如 .children、.appendChild 等。如您所知,这就是 Javascript!

    【讨论】:

    • 您可以将其转换为在 Play 模板引擎中呈现的字符串。
    • 如果你想生成HTML,你应该import scalatag.Text.all._。如果您希望它仅生成 Javascript DOM 元素,您可以使用 import scalatags.JsDom.all._,就像您在上面的示例中所做的那样。虽然理论上您可以在 JsDom 生成的 DOM 元素上调用 .innerHTML,但您不应该这样做:这样做会清除事件侦听器和可能的其他属性。此外,JsDom 不适用于 Scala-JVM 服务器。所以你应该使用scalatags.Text。如果您想在两者之间共享代码,请参阅有关如何执行此操作的文档lihaoyi.com/scalatags/#Cross-backendCode
    猜你喜欢
    • 2011-07-26
    • 2011-05-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多