Scala JS：調用元素的Javascript函數

Question

我遇到以下問題。我想在我的項目中使用https://github.com/aehlke/tag-it/。但是我不知道我應該如何實現GitHub的頁面上給出了下面的例子：

<script type="text/javascript"> 
$(document).ready(function() { 
$("#myTags").tagit(); 
}); 
</script> 

<ul id="myTags"> 
<!-- Existing list items will be pre-added to the tags --> 
<li>Tag1</li> 
<li>Tag2</li> 
</ul> 

到目前爲止，我能夠操縱對象：

val document = js.Dynamic.global.document 
document.getElementById("myTags").innerHTML = "Test" 

這工作！正在呈現Test。

當我撥打tagit()而不是我被告知tagit is not a function。

val document = js.Dynamic.global.document 
document.getElementById("myTags").tagit() 

當我做到了「相同」與鉻Java腳本控制檯調用一切工作正常：

$("#myTags").tagit(); 

有人能解釋什麼，我做錯了什麼？先謝謝你！

編輯

它不是標籤，或jQuery的沒有被加載的問題。再次，鉻控制檯的作品。這也不是加載問題。即使通過在100％加載所有內容後單擊按鈕，它也不起作用。

編輯

加了我部分的構建確定指標，以便大家可以看到，依賴關係是正確的：

.jsSettings(
     jsDependencies ++= Seq(
     "org.webjars" % "bootswatch-yeti" % "3.3.5"/"js/bootstrap.js" minified "js/bootstrap.min.js" dependsOn "jquery.js", 
     "org.webjars" % "jquery-ui" % "1.11.4"/"jquery-ui.js" minified "jquery-ui.min.js" dependsOn "jquery.js", 
     "org.webjars" % "tag-it" % "2.0"/"js/tag-it.js" dependsOn "jquery.js" dependsOn "jquery-ui.js" 
    ), 
     libraryDependencies ++= Seq(
     "io.github.widok" %%% "widok" % "0.2.2" exclude ("org.webjars", "bootstrap"), 
     "be.doeraene" %%% "scalajs-jquery" % "0.8.0", 
     "com.lihaoyi" %%% "scalatags" % "0.4.6", 
     "org.webjars" % "bootswatch-yeti" % "3.3.5", 
     "org.webjars" % "font-awesome" % "4.4.0", 
     "org.webjars" % "jquery-ui-themes" % "1.11.4" 
    ), 
     persistLauncher := true 
    ) 

Answer 1

你的問題，最初是

// Scala.js code 
document.getElementById("myTags").tagit() 

是不 「相同」 作爲

// JavaScript code 
$("#myTags").tagit(); 

相反，它是一樣的，你猜怎麼着？

// JavaScript code 
document.getElementById("myTags").tagit(); 

這是無效的，因爲tagit()不是通過getElementById返回的HTMLElement的方法。 tagit()是函數返回的對象的JQuery（pimped）方法。

可以使用獲得$功能的動態類型方式：

// Scala.js code 
val $ = js.Dynamic.global.$ 

，然後你可以通過寫這個寫相同如jQuery的調用：

// Scala.js code 
$("#myTags").tagit() 

解決方案發現實質上是相似的，因爲jQuery對象相當於$。但那麼返回的元素是一個JQuery對象，其中靜態沒有tagit()方法，這就是爲什麼你需要將它投到js.Dynamic。

另一種方法是鍵入使用此方法tagit()皮條客：

// Scala.js code 
@js.native 
trait JQueryTagIt extends js.Object { 
    def tagit(): Unit = js.native 
} 

implicit def tagItExtensions(jq: JQuery): JQueryTagIt = 
    jq.asInstanceOf[JQueryTagIt] 

有了這一點，你可以更簡單地做：

// Scala.js code 
jQuery("#myTags").tagit() 

，它是靜態typechecked。

Answer 2

$(document).ready(function(){ 
 
    $("#myTags").tagit(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="http://bitar.tk/tag-it.min.js"></script> 
 

 
<ul id="myTags"> 
 
<!-- Existing list items will be pre-added to the tags --> 
 
<li>Tag1</li> 
 
<li>Tag2</li> 
 
</ul>

Answer 3

我發現了有效的解決方案。它使用Scala JS的jQuery綁定。通過構建自己的靜態綁定是我猜測的正確方法。

jQuery("#myTags").asInstanceOf[js.Dynamic].tagit() 

UPDATE

請看以下職位（https://stackoverflow.com/a/32994303/1029251），因爲這種做法是完全錯誤的考慮是什麼scala.js代表。我的解決方案不是類型安全的！