如何从scala-js调用第三方javascript？

Question

我需要在scalajs应用程序(特别是scalajs-react应用程序)中初始化原生JS var的帮助。基本上，我正在尝试使用Bootstrap Responsive data-tables，我需要初始化一个数据表，方法是通过调用类型为DataTable的dom.getElementById来获取数据表的元素，然后我需要像这样初始化：

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

我一直在关注@js.native的东西，但不太明白如何与原生JS建立联系。任何帮助都将不胜感激。作为参考，到响应数据表的本机javascript的链接是here。对于那些有scalajs-react背景的人，还有一个问题(你在@japgolly吗？)这个数据表初始化调用的最佳位置是否应该在ReactComponentB.componentDidMount()方法中？

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