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的原因。 / p>

另一种方法是使用以下方法键入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()

并且它将被静态地检查。

Answer 2

＆＃13;

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

＆＃13;

%i

＆＃13;

Answer 3

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

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

<强>更新

请参阅以下帖子（https://stackoverflow.com/a/32994303/1029251），因为考虑到scala.js代表什么，这种方法完全错误。我的解决方案不是类型安全的！

Scala JS：在元素

3 个答案: