Scala JS:在元素上调用 Javascript 函数

Scala JS: Call a Javascript function on an element

我有以下问题。我想在我的项目中使用 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 脚本控制台执行 "same" 调用时,一切正常:

$("#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
    )

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

我找到了一个有效的解决方案。它为 Scala JS 使用 jQuery 绑定。我想通过构建自己的静态绑定是正确的方法。

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

更新

请参阅以下 post (),因为考虑到 scala.js 代表什么,这种方法是完全错误的。我的解决方案不是类型安全的!

你的问题,最初是

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

不是 "the same"是

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

相反,它与你猜怎么着一样?

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

这是无效的,因为 tagit() 不是 getElementById 返回的 HTMLElement 的方法。 tagit()$ 函数返回的 JQuery 对象的(拉皮条)方法。

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

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

并且会进行静态类型检查。