How to split html content into partials using Binding.scala?

Question

I want to split my html content into different partials, so can combine them easily in different pages. I tried to code like this:

  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)
    }
  }

then get compiling error, saying:

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

then I add one empty line between title1 and title2

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

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

Compile success with one warning:

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

When I open the html file, I find that title1 and title2 are both missing, there is only title3 on the page.

I am new to scala and Binding.scala, and don't know why this happens.

You can try to test on ScalaFiddle

Yang Bo · Answer 1 · 2017-03-16T01:09:13.510

It's your code:

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

Scala compile parsed the above code the same as:

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

As you see, the Scala compiler try to treat <h1>Title 1</h1> as a function, then call it with the argument title2.bind.

However, <h1>Title 1</h1>, whose type is org.scalajs.dom.html.Heading, is not callable.

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

That's why you see the error message.

You can avoid the error by wrapping them all in a XML literal

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

How to split html content into partials using Binding.scala?

1 Answers1