javascript callback 처리 하기 - checkbox

문제

dropdown callback 처리 처럼 reactive, non-reactive 하게 각각 사용할 수 있다. 

여기서는 reactive 하게 동작하게 해 보자.

코드

import mhtml._
import org.scalajs.dom
import scala.scalajs.js


val isChecked: Var[Boolean] = Var(false)

val content =
  <div>
    <div id="MY_CHECKBOX" class="ui checkbox">
      <input type="checkbox" onclick={e: js.Dynamic => isChecked := e.target.checked.asInstanceOf[Boolean]}></input>
      <label>Label</label>
    </div>
    <div>isChecked: {isChecked.map(_.toString)}</div>
  </div>

mount(dom.document.getElementById("main_content"), content)

import mhtml._
import org.scalajs.dom
import scala.scalajs.js

val isChecked: Var[Boolean] = Var(false)

val content =
    <div>
        <div id="MY_CHECKBOX" class="ui checkbox">
            <input type="checkbox"></input>
            <label>Label</label>
        </div>
        <div>isChecked: {isChecked.map(_.toString)}</div>
    </div>

mount(dom.document.getElementById("main_content"), content)

val checkedHandler: js.Function0[Unit] = () => isChecked := true
val uncheckedHandler: js.Function0[Unit] = () => isChecked := false

js.Dynamic.global
    .$("#MY_CHECKBOX")
    .checkbox( js.Dictionary("onChecked" -> checkedHandler, "onUnchecked" -> uncheckedHandler))