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代表。我的解决方案不是类型安全的！