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:- At line 1 we declare a reactive variable,
Var[Int]
with initial value of0
. - Next, at line 4 we increment it, every second.
- 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 forVar[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: