在 scala.js 中实施 jquery-ui

Question

我正在尝试从 scala.js 呼叫 jquery-ui。我曾尝试修改 jquery 库的实现方式，但到目前为止没有成功。所以我定义了以下特征和包对象：

trait JQueryUI extends js.Object {

    def apply(selector: String): JQueryUI = ???
    val buttonset: js.Any = ???
}

package object jqueryui extends js.GlobalScope {
    val jQueryUI: JQueryUI = ???
}

然后添加一个JSApp如下：

object JQueryUIApp extends JSApp {
    def main(): Unit = {
        jqueryui.jQueryUI("#sports").buttonset
    }   
}

但是在我的 JavaScript 控制台上出现以下错误：

TypeError: ScalaJS.g["jQueryUI"] is not a function (0, ScalaJS.g["jQueryUI"])("#sports")["buttonset"]

谁能告诉我我错过了什么？

Answer 1

通过在包 object 中声明 val jQueryUI，您告诉 Scala.js 这对应于 JavaScript 中名为 [=14= 的全局变量].现在这不是真的：您要查找的实际变量名为 jQuery。您可以通过使用 @JSName:

显式命名值来解决此问题

import scala.scalajs.js.annotation.JSName

package object jqueryui extends js.GlobalScope {
  @JSName("jQuery")
  val jQueryUI: JQueryUI = ???
}

但是，由于 jQuery-UI 实际上是 jQuery object 的扩展，我将在 JQuery scalajs-jquery 的特征。这将允许对两种用法使用正常的 jQuery（jQuery-core 方法和 jQuery-UI 方法）。一般机制在 the Calling JavaScript guide 中的标题 "Monkey patching" 中进行了解释。在您的情况下，它看起来像这样：

trait JQueryUI extends JQuery {
  val buttonset: js.Any = ???
}

object JQueryUI {
  implicit def jQueryUIExtensions(query: JQuery): JQueryUI =
    query.asInstanceOf[JQueryUI]
}

使用这些定义，您可以：

import org.scalajs.jquery._
import JQueryUI.jQueryUIExtensions

def main(): Unit = {
  jQuery("#sports").buttonset
}

请注意，我使用的是普通的 jquery.jQuery object，其中 returns 是普通的 JQuery object，但后来我调用了 buttonset值，定义在JQueryUI中。这是因为隐式转换 jQueryUIExtensions.

在 scala.js 中实施 jquery-ui

Implementing jquery-ui in scala.js

jquery

scala

jquery-ui

scala.js