BindableSeq

The bindSeq can be enabled by the following import statement:

import com.thoughtworks.binding.bindable._

Then, a @dom XHTML template can establish data-binding on any parameter as long as a BindableSeq type class for the parameter type is available.

import org.scalajs.dom.raw._

@dom
def mySection[A: BindableSeq.Lt[?, Node]](parameter: A) = {
  <section>{parameter.bindSeq}</section>
}

Note that the ? syntax requires the Scala plug-in kind-projector, which can be enabled by adding the following setting into your build.sbt:

addCompilerPlugin("org.spire-math" %% "kind-projector" % "0.9.10")

The mySection method accepts any parameter who is a subtype of Binding[Node] or Binding[BindingSeq[Node]].

import com.thoughtworks.binding._, Binding._
@dom def myButton: Binding[HTMLButtonElement] = <button type="button">My Button 0</button>
@dom def myButtons: Binding[BindingSeq[Node]] = <button type="button">My Button 1</button><button type="button">My Button 2</button>
Binding {
  mySection(myButton).bind.innerHTML should be("My Button 0")
  mySection(myButtons).bind.innerHTML should be("My Button 1My Button 2")
}.watch()

And the mySection method also accepts Node, BindingSeq[Node], List[Node], Array[Node], js.Array[Node], or Binding[js.Array[Node]] parameter.

import scala.scalajs.js
@dom def test = {
  mySection(<button type="button">My Button 3</button>).bind.innerHTML should be("My Button 3")
  mySection(<button type="button">My Button 4</button><button type="button">My Button 5</button>).bind.innerHTML should be(
    "My Button 4My Button 5"
  )
  mySection(List(<button type="button">My Button 6</button>, <button type="button">My Button 7</button>)).bind.innerHTML should be("My Button 6My Button 7")
  mySection(Array(<button type="button">My Button 8</button>, <button type="button">My Button 9</button>)).bind.innerHTML should be("My Button 8My Button 9")
  mySection(js.Array(<button type="button">My Button 10</button>, <button type="button">My Button 11</button>)).bind.innerHTML should be("My Button 10My Button 11")
  mySection(Constant(js.Array(<button type="button">My Button 12</button>, <button type="button">My Button 13</button>))).bind.innerHTML should be("My Button 12My Button 13")
}

test.watch()

mySection should not accept irrelevant parameter types like scala.collection.immutable.Set or scala.Int.

"mySection(Set.empty)" shouldNot compile
"mySection(42)" shouldNot compile