如何使用 Binding.scala 将 html 内容拆分为部分内容？答案

【问题标题】：How to split html content into partials using Binding.scala?如何使用 Binding.scala 将 html 内容拆分为部分内容？
【发布时间】：2017-08-06 10:43:15
【问题描述】：

我想将我的 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上测试

【问题讨论】：

标签： scala parsing scala.js xml-literals binding.scala

【解决方案1】：

这是你的代码：

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

Scala compile 解析上述代码同：

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

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

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

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

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

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

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

【讨论】：