Scalatags генерирует HTML или Javascript?

Я видел некоторый код Scala, который, кажется, генерирует HTML...

  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 фактически генерирует HTML, который может быть прочитан простым веб-сканером без поддержки javascript, или он генерирует Javascript, который модифицирует DOM для создания элементов div и абзацев и что нет?

Я попытался прочитать документацию, но для div и p не было ничего, кроме "Pattern: div: Tags.this.ConcreteHtmlTag[html.Div]"

1 ответ

Решение

Это использует оба, хорошо по крайней мере теперь, это делает:

Из документов:

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

Более того:

Серверная часть DOM предоставляет дополнительный метод.render для всех фрагментов Scalatags, который преобразует фрагмент в дерево 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, вызывая стандартные API-интерфейсы DOM, такие как.children, .appendChild и т. Д. Как вы знаете, Javascript!

Другие вопросы по тегам