Scala JS:对元素调用Javascript函数
我有以下问题。我想在我的项目中使用。但是,我不确定如何实现github页面上给出的以下示例:Scala JS:对元素调用Javascript函数,javascript,scala,scala.js,Javascript,Scala,Scala.js,我有以下问题。我想在我的项目中使用。但是,我不确定如何实现github页面上给出的以下示例: <script type="text/javascript"> $(document).ready(function() { $("#myTags").tagit(); }); </script> <ul id="myTags"> <!-- Existing list items will be pre-added to the tags -->
<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>
这管用<正在呈现代码>测试
当我调用tagit()
val document = js.Dynamic.global.document
document.getElementById("myTags").tagit()
当我使用chrome java脚本控制台进行“相同”调用时,一切正常:
$("#myTags").tagit();
有人能解释一下我做错了什么吗?提前谢谢你
编辑
这不是标记它或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
)
$(文档).ready(函数(){
$(“#myTags”).tagit();
});代码>
- Tag1
- Tag2
我找到了一个有效的解决方案。它对Scala JS使用jQuery绑定。我想,通过构建自己的静态绑定是正确的方法
jQuery("#myTags").asInstanceOf[js.Dynamic].tagit()
更新
请参阅下面的帖子(),因为考虑到scala.js所代表的含义,这种方法完全是错误的。我的解决方案不安全 最初,你的问题是
// Scala.js code
document.getElementById("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()
方法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()
它将被静态地键入检查。两个问题,一个)您不能将tag it js添加到您的网站;二)在jquery之前添加tag it。@Omidam81两者都不是这样。我甚至安装了一个按钮进行测试,以确保所有东西都已加载。它不起作用。Chrome控制台工作,按钮不工作。请检查答案。谢谢,您的代码是正确的,但我认为问题在于您添加脚本(带有src)标记的顺序。@Omidam81不,scala js不会出现这种情况。我更新了我的问题。正如您所看到的,我已经告诉编译器标记依赖于jquery和jquery ui。完成后,一切都会为您处理。这里不会有错的。非常感谢。你看到我在使用Scala JS了吗?我正在构建一个SPA(单页应用程序)。一种是使用sbt构建定义定义scala依赖项。我更新了我的awnser以便每个人都能看到我的DEP。非常感谢!很好的解释。有一件事我仍然不明白,那就是我应该如何传递选项。e、 g.tagit({tagLimit:1})
。对于动态类型的版本,使用js.Dynamic.literal(tagLimit=1)
。对于静态类型的版本,请参阅以下问题:这种方法总是有效的,但如果可以避免,则不建议使用这种方法,因为它会让您脱离强类型领域,而强类型是Scala.js的一个要点。所以这类事情通常被视为最后的手段。@JustinduCoeur我百分之百同意。我在sjrd雨篷前发布了这个。我会编辑这篇文章。
// 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()