How do I create a Binding of HTML node conditionally?

Question

I want to conditionally create a Binding of HTML node.

@dom def maybeEmpty: Binding[Node] = {
  if (math.random > 0.5) {
    <div>non-empty content</div>
  }
}

However the code does not compile.

error: type mismatch;
 found   : Unit
 required: org.scalajs.dom.raw.Node

Answer 1

Since Binding.scala 11.1.x you can write:

@dom def maybeEmpty: Binding[Option[Node]] = {
  if (math.random > 0.5) {
    Some(<div>non-empty content</div>)
  } else {
    None
  }
}

Answer 2

You need an else block with an empty content, usually a HTML comment:

@dom def maybeEmpty: Binding[Node] = {
  if (math.random > 0.5) {
    <div>non-empty content</div>
  } else {
    <!-- empty content -->
  }
}