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()

当我使用chrome java脚本控制台进行"相同"调用时,一切正常:

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

谁能解释我做错了什么？先感谢您!

编辑

这不是tag-it或jquery没有被加载的问题.Chrome控制台再次起作用.这也不是装载问题.即使在所有内容加载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()它不是一个HTMLElement返回的方法getElementById.tagit()是函数JQuery返回的对象(pimped)方法$.

您可以$使用以下动态类型获取该函数:

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

然后您可以通过编写以下内容来编写与jQuery调用相同的内容:

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

找到的解决方案基本相似,因为jQuery对象相当于$.但是返回的元素是一个JQuery对象,它静态地没有tagit()方法,这就是你需要将它强制转换的原因js.Dynamic.

另一种方法是tagit()使用以下方法键入方法pimp:

// 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()

它将被静态地检查.