web/mhtml
-
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)
-
impure run 사용하기web/mhtml 2021. 10. 28. 00:15
코드 import mhtml._ import org.scalajs.dom import scala.scalajs.js object MHtmlTest { def view(): Unit = { val x: Var[List[String]] = Var(List("a", "b", "c")) val first: Var[String] = Var("Z") // x.map(list => first := list.head).impure.run(_ => ()) x.impure.run(list => first := list.head) val content = {first} x.update(list => e.target.value.asInstanceOf[String] :: list) } /> mount(dom.document.g..
-
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..
-
mhtml 에서 imitate 로 Var 값에 Rx 복사하기web/mhtml 2021. 10. 25. 22:07
문제 mhtml 에서 아래와 같이 x, y 가 있을 때 x 값에 y 를 복사해 보자 val x: Var[Int] = Var(1) val y: Var[Int] = Var(2) 코드 mhtml 의 imitate 를 사용해 복사할 수 있다. import mhtml._ import org.scalajs.dom object MHtmlTest { def view(): Unit = { val x: Var[Int] = Var(1) val y: Var[Int] = Var(2) val z: Rx[Int] = x.imitate(y) val content = {x} {z} mount(dom.document.getElementById("main_content"), content) } } 화면에 x, z 값이 노출되어 2 2 를..
-
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("") ..
-
mhtml - Seq[A] 를 화면에 보여주기web/mhtml 2021. 8. 12. 14:38
monadic html 가이드 를 보면 scala.xml.Group 을 이용해 Seq[Node] 를 mount 할 수 있다고 하는데, 아래와 같이 코딩하는 것도 잘 동작했다. fomantic-ui List 를 활용했다. 코드 def showList(main: Seq[String], sub: Seq[String]): Elem = Main {main.map(x => {x})} Sub {sub.map(x => {x})} 출력 결과 예시 Main People News Sub Banner