javascript callback 처리 하기 - dropdown

문제

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("")

val dropdownHandler: js.Function2[String, String, Unit] = 
    (text, value) => selectedGender := value
    
val content =
     <div>
         <div id="MY_MENU" class="ui selection dropdown">
             <input type="hidden" name="gender"></input>
             <i class="dropdown icon"></i>
             <div class="default text">Gender</div>
             <div class="menu">
                 <div class="item" data-value="male">Male</div>
                 <div class="item" data-value="female">Female</div>
             </div>
         </div>
         <div>selected: {selectedGender}</div>
     </div>

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

js.Dynamic.global
    .$("#MY_MENU")
    .dropdown(js.Dictionary("onChange" -> dropdownHandler))

 

non-reactive 방식

위의 reactive 방식에서 mhtml 의 sampleOn 을 응용해 구현할 수도 있고, 아래처럼도 가능하다.

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

val selectedGender: Var[String] = Var("Gender")

val content =
    <div>
        <div id="MY_MENU" class="ui selection dropdown">
            <input type="hidden" name="gender"></input>
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="male">Male</div>
                <div class="item" data-value="female">Female</div>
            </div>
        </div>
        <button onclick={ () => selectedGender := js.Dynamic.global.$("#MY_MENU").dropdown("get text").asInstanceOf[String] }>read selected</button>
        <div>selected: {selectedGender}</div>
    </div>

mount(dom.document.getElementById("main_content"), content)
js.Dynamic.global.$("#MY_MENU").dropdown()