Как обрабатывать ввод данных в модальном диалоговом окне scala.js bootstrap?

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 на кнопке, не так ли?

Как мне это сделать красивым способом - то есть предпочтительнее какой-то способ загрузки/скала.js, чтобы я сохранил безопасность своего типа?

Я рассмотрел пример проекта bootstrap/scala.js, но он просто отображает пример диалогового окна, он ничего не делает с данными.

Я намеренно удалил тег bootstrap из этого вопроса, я ищу, как решить это с помощью 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

Это модифицированный пример объекта TestModal из bootstrap/scala.js v1.1.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) 
    ) 

Вы видите, что входное значение немедленно изменяется на консоли, когда оно происходит в диалоговом окне открытия.