如何从 scala-js 调用 3rd 方 javascript？

【问题标题】：How to invoke 3rd party javascript from scala-js?如何从 scala-js 调用 3rd 方 javascript？
【发布时间】：2017-05-02 16:38:00
【问题描述】：

我需要从 scalajs 应用程序（特别是 scalajs-react 应用程序）中初始化本机 JS var 的帮助。从根本上说，我正在尝试使用Bootstrap Responsive data-tables，我需要通过调用 dom.getElementById 来初始化数据表，方法是通过调用 dom.getElementById 在我的 HTML 中获取数据表的元素，然后我需要像这样初始化这个：

$(document).ready(function() {
    $('#example').DataTable();
} );

我一直盯着@js.native 的东西，不知道如何建立与该本地 JS 的连接。任何帮助将不胜感激。作为参考，响应式数据表的原生 javascript 的链接是here。对于具有 scalajs-react 背景的人（你在吗@japgolly？）的另一个问题是，进行此数据表初始化调用的最佳位置是否应该在 ReactComponentB.componentDidMount() 方法中？

【问题讨论】：

标签： scala.js scalajs-react

【解决方案1】：

设置数据表的最简单方法是使用动态 API：

dom.document.getElementById("example").asInstanceOf[js.Dynamic].DataTable()

当然，您只需要在加载文档后执行此操作。您可以使用 scala-js-jquery 来执行此操作：

jQuery(dom.document).ready(() =>
  dom.document.getElementById("example").asInstanceOf[js.Dynamic].DataTable()
)

如果您希望对DataTable 进行更好的（和类型安全的）调用，可以关注Monkey Patching Guide（抱歉没有锚，搜索该术语）：

@js.native
trait DataTableElement extends dom.Element {
  def DataTable(): Unit = js.native
}

object DataTableElement {
  implicit def element2dataTableElement(e: dom.Element): DataTableElement =
  {
    e.asInstanceOf[DataTableElement]
  }
}

你现在不再需要演员表了：

dom.document.getElementById("example").DataTable()

还有：

jQuery(dom.document).ready(() =>
  dom.document.getElementById("example").DataTable()
)

【讨论】：