在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

通过声明val jQueryUI类似于你的包对象，你告诉Scala.js它对应于一个名为jQueryUI的JavaScript全局变量。现在不是这样：你正在寻找的实际变量名为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核心方法和 jQuery-UI方法）。一般机制在the Calling JavaScript guide中以“猴子修补”标题解释。在你的情况下，它应该是这样的：

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。