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，对吧？

我如何以一种很好的方式做到这一点 - 即最好是某种类型的bootstrap / scala.js，以便保持我的类型安全性？

我查看了bootstrap / scala.js项目示例，但是只显示了一个示例对话框，它对数据没有任何作用。

我故意从这个问题中删除了bootstrap标签，我正在寻找如何使用scala.js解决这个问题（通过bootstrap facade），而不仅仅是使用bootstrap本身。

Answer 1

这是来自bootstrap / scala.js v1.1.1的对象TestModal的修改示例。当然还有其他方法可以做到这一点，但一种解决方案是将字段定义移出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)
    )

在打开的对话框中，您会看到控制台上的输入值立即发生变化。

Answer 2

这是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()
}

为了做我想做的事情（包括没有输入数据时没有关闭对话框），我不得不另外修改Modal facade类，以便我可以注册onHide，onHidden事件以不关闭对话框等。

如何在scala.js引导模式对话框中处理数据输入？

2 个答案: