如何使用Binding.scala将HTML内容拆分为多个部分？

Question

我想将html内容拆分为不同的部分，因此可以轻松地将它们组合在不同的页面中。 我试图这样编码：

  object App extends JSApp {
    @dom def title2() = {
      <!-- Title 2 -->
        <h2>Title 2</h2>
      <!-- End Title 2 -->
    }

    @dom def render() = {
        <h1>Title 1</h1>
        { title2.bind }
        <h3>Title 3</h3>
    }

    @JSExport def main(): Unit = {
      dom.render(document.getElementById("app"), render)
    }
  }

然后得到编译错误，说：

App.scala:23: org.scalajs.dom.html.Heading does not take parameters
[error]             { title2.bind }
[error]             ^
[error] one error found
[error] (compile:compileIncremental) Compilation failed

然后我在title1和title2之间添加一条空行

    @dom def render() = {
        <h1>Title 1</h1>

        { title2.bind }
        <h3>Title 3</h3>
    }

编译成功并显示以下警告：

App.scala:24: a pure expression does nothing in statement position; multiline expressions might require enclosing parentheses
[warn]             { title2.bind }
[warn]                      ^
[warn] one warning found

当我打开html文件时，我发现title1和title2都丢失了，页面上只有title3。

我是scala和Binding.scala的新手，不知道为什么会这样。

您可以尝试在ScalaFiddle上进行测试

Answer 1

这是您的代码：

<h1>Title 1</h1>
{ title2.bind }
<h3>Title 3</h3>

Scala编译后将上面的代码解析为：

<h1>Title 1</h1>{ title2.bind };
<h3>Title 3</h3>;

如您所见，Scala编译器尝试将<h1>Title 1</h1>视为函数，然后使用参数title2.bind进行调用。

但是，类型为org.scalajs.dom.html.Heading <h1>Title 1</h1>不可调用。

org.scalajs.dom.html.Heading does not take parameters

这就是为什么您看到错误消息的原因。

您可以通过将它们全部包装在XML文字中来避免错误

<div>
  <h1>Title 1</h1>
  { title2.bind }
  <h3>Title 3</h3>
</div>