在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。