scala.jsブートストラップモーダルダイアログでデータ入力を処理するにはどうすればよいですか？

Question

私は私のユーザーからのいくつかのデータを収集するために、scala.jsを使用して、プラスbootstrap facadeています：

def showModal(kopiUser: KopiUser): Unit = { 
    def modal = Modal().withTitle("modal title"). 
    withBody(
     p(s"${kopiUser.displayName}, please enter your data"), 
     Form(
     FormInput.text("fieldlabel") 
    ) 
    ). 
    withButtons(
     Modal.closeButton(), 
     Modal.button("Submit", Modal.dismiss) 
    ) 
    modal.show() 
} 

ユーザーが「送信」ヒットすると、私は入力されたデータを取得し、それに何かをしたいです。

ダイアログはアニメーション化されており、ブートストラップのデフォルト設定に応じてスライドしたりフェードアウトしたりするので、ボタンにonClickを登録するだけでは問題ありません。

どうすればいいですか？つまり、私は自分のタイプセーフティを保持するために、ブートストラップ/ scala.jsのようなものを使用するのが望ましいでしょうか？

私はbootstrap/scala.jsプロジェクトの例を見てきましたが、例のダイアログを表示するだけで、データは何もしません。

私は意図的にこの質問からブートストラップタグを残しましたが、ブートストラップ自体を使用するのではなく、scala.js（ブートストラップファサード経由で解決するかどうか）を解決する方法を探しています。

Answer 1

これは私がscalajs-bootstrapプロジェクトのメンテナーから与えられた答えです。

def showModal(kopiUser: KopiUser): Unit = { 
    val data = Var("") 
    def modal = Modal().withTitle("modal title"). 
    withBody(
     p(s"${kopiUser.displayName}, please enter your data"), 
     Form(
     FormInput.text("fieldlabel", data.reactiveInput) 
    ) 
    ). 
    withButtons(
     Modal.closeButton(), 
     Modal.button("Submit", Modal.dismiss, onclick := Bootstrap.jsClick { _ ⇒ 
     // Do something with input 
     window.alert(data.now) 
     }) 
    ) 
    modal.show() 
} 

は、私はonHideを登録することができるようにさらにモーダルファサードクラスをハックしなければならなかった、onHiddenイベントは、ダイアログを閉じないようにする（データが入力されていなかったダイアログを閉じていないを含む）、私が望んでいた何をすべきか

Answer 2

これは、bootstrap/scala.js v1.1.1のオブジェクトTestModalの変更例です。確かにこれを行う他の方法もありますが、1つの解決策はフィールド定義をapply（）の外に移動してフォームの外に移動することです。 このようにして、TestModal2オブジェクトの外で見ることができます。

object TestModal2 { 
    val modalInputValue = Var("10000000") // Better use string 
    val radioGroup = FormInput.radioGroup(FormInput.radio("Test1", "modal-title", "First radio"), FormInput.radio("Test2", "modal-title", "Second radio")) 
    val select = FormInput.simpleSelect("Plain select", "Option 1", "Option 2", "Option 3") 
    val multipleSelect = FormInput.simpleMultipleSelect("Multiple select", "Option 1", "Option 2", "Option 3") 
    val inputTextArea = FormInput.textArea("Money text area", rows := 1, modalInputValue.reactiveInput) 
    val selectedFile = Var("") 
    val inputFile = FormInput.file("Test file", onchange := Bootstrap.jsInput { input ⇒ 
    val file = input.files.head 
    selectedFile.update(file.name) 
    window.alert(s"File selected: ${file.name}") 
    }) 
    val form = Form(
    FormInputGroup(FormInputGroup.label("Money"), FormInputGroup.addon("usd".fontAwesome(FontAwesome.fixedWidth)), FormInputGroup.number(modalInputValue.reactiveInput)), 
    radioGroup, 
    select, 
    multipleSelect, 
    inputTextArea, 
    inputFile 
) 

    def apply()(implicit ctx: Ctx.Owner): Modal = { 
    Modal() 
     .withTitle(radioGroup.value, "/", select.selected.map(_.head), "/", multipleSelect.selected.map(_.mkString(" + "))) 
     .withBody(p("You won ", modalInputValue, "$"), p(form)) 
     .withButtons(Modal.closeButton(), Modal.button("Take", Modal.dismiss)) 
    } 
} 

たとえば、コーリングコードのどこかに入力します。この

TestModal2.modalInputValue.trigger(
     println("modalInputValue = " + TestModal2.modalInputValue.now) 
    ) 
    TestModal2.select.selected.trigger(
     println("select = " + TestModal2.select.selected.now) 
    ) 
    TestModal2.selectedFile.trigger(
     println("selectedFile = " + TestModal2.selectedFile.now) 
    ) 

開いているダイアログで入力値がコンソール上ですぐに変化するのがわかります。