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

The variable in an html interpolation could be a com.thoughtworks.binding.Binding.BindingSeq of org.scalajs.dom.Node.

 import com.yang_bo.html.*
 import com.thoughtworks.binding.Binding.Constants
 import org.scalajs.dom.Node
 import org.scalajs.dom.document
 val texts = Constants("foo", "bar")
 val node =
   html"""<select>${
     for (text <- texts) yield html"<option>$text</option>".bind
   }</select>"""
 render(document.body, node)
 document.body.innerHTML should be(
   "<select><option>foo</option><option>bar</option></select>"
 )