Question

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

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

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

1 个答案: