在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"]不是函数(0,ScalaJS.g ["jQueryUI"])("#sports")["buttonset"]

有人能告诉我我错过了什么吗？

Answer 1

通过val jQueryUI在包对象中声明类似,您告诉Scala.js这对应于名为JavaScript的全局变量jQueryUI.现在情况并非如此:您要查找的实际变量已命名jQuery.您可以通过以下方式明确命名该值来解决此问题@JSName:

import scala.scalajs.js.annotation.JSName

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

然而,由于jQuery的UI是名副其实的延长了的jQuery对象,我会在扩展方法定义这个JQuery特质scalajs-jquery.这将允许使用jQuery两种用法的常规(jQuery-core方法和 jQuery-UI方法).一般机制在标题为"Monkey patching" 的Calling JavaScript指南中进行了解释.在你的情况下,它看起来像这样:

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对象,它返回一个普通JQuery对象,但后来我调用了buttonset值,该值在中定义JQueryUI.这是因为隐式转换jQueryUIExtensions.