ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • EventStream 의 flatMap vs combineWithFn
    web/laminar 2022. 10. 1. 17:37

    코드

    package com.github.windbird.playweb
    
    import com.raquo.laminar.api.L._
    import org.scalajs.dom
    
    object Main {
      def main(args: Array[String]): Unit = {
        val buttonA  = button("A")
        val buttonAE = buttonA.events(onClick.mapTo(scala.math.random())).debugLog()
        val buttonB  = button("B")
        val buttonBE = buttonB.events(onClick.mapTo(scala.math.random())).debugLog()
    
    //    val c: EventStream[String] = buttonAE.combineWithFn(buttonBE)((x, y) => s"$x + $y")
        val c: EventStream[String] = for {
          x <- buttonAE
          y <- buttonBE
        } yield s"$x + $y"
    
        val content = div(
          buttonA,
          buttonB,
          br(),
          label("response: "),
          child.text <-- c
        )
    
        val containerNode = dom.document.getElementById("main_content")
        render(containerNode, content)
      }
    }

     

    설명

    • for-comprehension 의 경우 buttonA event 가 있고 난 다음에 buttonB event 가 발생해야 c 값이 emit 된다. 순서도 중요하다. 특히, 첫 클릭으로 buttonB 가 클릭될 경우 아무런 event 도 전달되지 않는다. for-comprehension 을 flatMap 으로 변환해 보면 쉽게 이해된다. (debug 로그에도 안찍힘)
    • combineWithFn 의 경우는 buttonA, buttonB 클릭으로 양쪽 모두 적절한 값이 세팅된 상태일 때, 어느 하나만 클릭되어도 c 값이 emit 된다.

    보통 기대하는 동작은 combineWithFn 이 될 것 같다.

    'web > laminar' 카테고리의 다른 글

    완성 - 메뉴 구현  (0) 2022.01.29
    Waypoint 를 이용해 Router 적용  (0) 2022.01.28
    children 으로 List 표현하기  (0) 2022.01.20
    Observer 를 사용해 side effect 처리하기  (0) 2022.01.09
    Component - TextInput  (0) 2022.01.09

    댓글

Designed by Tistory.