Rx DOM

Now when we have some state, we need to show it to the user.
We need to add some additional imports:

import org.scalajs.dom
import ba.sake.rxtags._

Here is an example of a ticker, it counts the number of seconds passed:


        val ticker$ = Var(0)

        dom.window.setInterval(
          () => { ticker$.set(t => t + 1) },
          1000
        )
      
        def content = div(
          "Ticker: ",
          ticker$
        )
      
Result:
  1. At line 1 we declare a reactive variable, Var[Int] with initial value of 0.
  2. Next, at line 4 we increment it, every second.
  3. Finally, at line 10 we render it to HTML.

Any Var[Frag] can be put just as ordinary ScalaTags! :)
There are also handy implicit conversions for Var[String], Var[Int] (in example above) and similar.


Here is another example, using an event handler:


        val name$ = Var("")

        def content = div(
          "Please enter your name: ",
          input(onkeyup := updateName),
          br,
          "Your name: ",
          name$
        )
      
        def updateName: (dom.KeyboardEvent => Unit) =
          e => {
            val inputField = e.target.asInstanceOf[Input]
            name$.set(inputField.value)
          }
      
Result: