如何在 scala.js 中调用 $.modal.close()

Question

我正在使用这个 jQuery modal library for modal dialogs. Using Scala.js, how do I invoke the same Javascript $.modal.close() 来关闭 Scala 中的模态对话框？谢谢

更新#1

我使用 https://github.com/jducoeur/jquery-facade together with https://github.com/jducoeur/jsext 创建了这些样板来配置模态对话框，

@js.native
trait JQueryModal extends JQuery {
 def modal(params: JQueryModalOptions): Nothing = js.native
}

@js.native
trait JQueryModalOptions extends js.Object
object JQueryModalOptions extends JQueryModalOptionsBuilder(noOpts)
class JQueryModalOptionsBuilder(val dict: OptMap) extends JSOptionBuilder[JQueryModalOptions, JQueryModalOptionsBuilder](new JQueryModalOptionsBuilder(_)) {

Answer 1

在我的示例中，我可以向您展示如何使用 Semantic-UI 模态来执行此操作。

我使用这个 JQuery 外观："be.doeraene" %%% "scalajs-jquery" % "0.9.1"

然后我用'monkey patching':

object SemanticUI {

  // Monkey patching JQuery
  @js.native
  trait SemanticJQuery extends JQuery {
    def modal(params: js.Any*): SemanticJQuery = js.native
  }

  // Monkey patching JQuery with implicit conversion
  implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
}

在代码中你可以这样使用：

import org.scalajs.jquery.jQuery
import SemanticUI.jq2semantic

<button class="ui basic icon button"
              onclick={_: Event =>
                setTimeout(200) {
                  jQuery(".ui.modal").modal("show")
                }
              }>open dialog</button>

Answer 2

从预期的调用站点 $.modal.close()，我们可以看到 modal 是 $ 的 "static" 部分的属性，因此您应该拉皮条 JQueryStatic 而不是 JQuery。 JQueryStatic是$的类型，而JQuery是$(...)返回的东西的类型。

此外，modal 字段可用于嵌套方法（如 close() 中）或作为函数调用本身（如 $.modal(...) 中）。因此，最好将其建模为一种特征，其中包括 apply 方法。

@js.native
trait JQueryModalStatic extends js.Object {
  def apply(params: JQueryModalOptions): Unit = js.native

  def close(): Unit = js.native
}

implicit class JQueryStaticToModalStatic(private val jQuery: JQueryStatic.type)
    extends AnyVal {

  @inline def modal: JQueryModalStatic =
    jQuery.asInstanceOf[js.Dynamic].modal.asInstanceOf[JQueryModalStatic]
}

当隐式 class 在范围内（已导入）时，这允许同时调用 $.modal(...)（由 apply 方法定义提供）和 $.modal.close().

如何在 scala.js 中调用 $.modal.close()

How to invoke $.modal.close() in scala.js

jquery

scala.js

更新#1