Atry/html.scala

Attributes

Example:

An html interpolation that includes a single root node should be a subtype of Binding.Stable[Node].

 import com.yang_bo.html.*
 import com.thoughtworks.binding.Binding
 import com.thoughtworks.binding.Binding.Var
 import org.scalajs.dom.HTMLSpanElement
 val color = Var("brown")
 def animal = "dog"
 val span: Binding.Stable[HTMLSpanElement] =
   html"""<span>The quick ${color.bind} fox jumps&nbsp;over the lazy ${animal}</span>"""

It can be then rendered into a parent node.

 import org.scalajs.dom.document
 render(document.body, span)
 document.body.innerHTML should be(
   """<span>The quick brown fox jumps&nbsp;over the lazy dog</span>"""
 )

If the html reference a data binding expression via com.thoughtworks.binding.Binding.bind, it will automatically change whenever the upstream data changes.

 color.value = "red"
 document.body.innerHTML should be(
   """<span>The quick red fox jumps&nbsp;over the lazy dog</span>"""
 )

An html interpolation that includes multiple single root nodes should be a BindingSeq[Node].

 import com.yang_bo.html.*
 import com.thoughtworks.binding.Binding.BindingSeq
 import org.scalajs.dom.Node
 import org.scalajs.dom.document
 def myId = "my-id"
 val nodes: BindingSeq[Node] =
   html"""<span>1&nbsp;${"foo"}2${"bar"}3</span><textarea id=$myId class="my-class">${"baz"}</textarea>"""
 render(document.body, nodes)
 document.body.innerHTML should be(
   """<span>1&nbsp;foo2bar3</span><textarea class="my-class" id="my-id">baz</textarea>"""
 )