monadic html
-
javascript callback 처리 하기 - radio buttonweb/mhtml 2022. 1. 3. 23:55
코드 import mhtml._ import org.scalajs.dom import scala.xml.Elem val optionVar: Var[String] = Var("naver") def optionItem(name: String): Elem = if (x == name) Some("checked") else None)} onclick={ () => optionVar := name }> {name} val content = {optionItem("naver")} {optionItem("google")} selected: {optionVar} mount(dom.document.getElementById("main_content"), content)
-
mhtml Rx 이해하기 - Ajax 호출시 경험web/mhtml 2021. 10. 27. 23:28
문제 다음 코드는 유효한 url 을 호출하였음에도 브라우저 콘솔에서 에러 메시지를 볼 수 있다. import mhtml._ import mhtml.future.syntax.FutureToRxSyntax import org.scalajs.dom import org.scalajs.dom.ext.Ajax import scala.concurrent.ExecutionContext.Implicits.global import scala.util.Success object MHtmlTest { def view(): Unit = { val url: String = "https://jsonplaceholder.typicode.com/todos/1" val response: Rx[List[String]] = Ajax.get..
-
javascript callback 처리 하기 - checkboxweb/mhtml 2021. 10. 25. 15:09
문제 dropdown callback 처리 처럼 reactive, non-reactive 하게 각각 사용할 수 있다. 여기서는 reactive 하게 동작하게 해 보자. 코드 import mhtml._ import org.scalajs.dom import scala.scalajs.js val isChecked: Var[Boolean] = Var(false) val content = isChecked := e.target.checked.asInstanceOf[Boolean]}> Label isChecked: {isChecked.map(_.toString)} mount(dom.document.getElementById("main_content"), content) import mhtml._ import org..
-
javascript callback 처리 하기 - dropdownweb/mhtml 2021. 10. 25. 14:01
문제 scalajs 에서 fomantic-ui dropdown module 을 사용하기 위해서는 javascript callback 을 등록해 줘야 한다. dropdown 동작 방식 처리는 아래와 같이 2가지로 할 수 있다. dropdown 메뉴에서 아이템이 선택되면 바로 UI 갱신 (reactive) 아이템을 선택한 후 별도의 버튼을 누르면 그 때 선택된 아이템을 읽어 UI 갱신 (non-reactive) fomantic-ui example 을 대상으로 mhtml 을 함께 사용해 구현해 보자 코드 reactive 방식 import mhtml._ import org.scalajs.dom import scala.scalajs.js val selectedGender: Var[String] = Var("") ..
-
mhtml - non-reacitve 적용하기web/mhtml 2021. 8. 12. 18:46
monadic html 에서는 reactive functional style 이 기본으로 오히려 non-reactive 하게 만들기가 어려운 것 같다. 그런데 가끔씩 non-reactive 하게 구현할 필요가 있다. submit 버튼을 누를 때 화면 변화가 있도록 만들어 보자. 첫번째 코드 import mhtml._ import org.scalajs.dom import scala.scalajs.js import scala.xml.Elem object MainView { case class Info(query: String, deivce: String) def view() = { val submitVar: Var[Unit] = Var(()) val queryVar: Var[String] = Var("") ..