Как вызвать сторонний javascript из scala-js?

Question

Мне нужна помощь в инициализации нативной переменной JS из приложения scalajs (в частности, приложения scalajs-реагировать). По сути, я пытаюсь использовать отзывчивые таблицы данных Bootstrap, и мне нужно инициализировать таблицу данных, получая элемент таблицы данных в моем HTML с помощью вызова dom.getElementById, который будет иметь тип DataTable, а затем мне нужно инициализировать так:

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

Я смотрел на материал @js.native и не могу понять, как установить соединение с этим нативным JS. Любая помощь будет принята с благодарностью. Для справки ссылка на нативный javascript адаптивной таблицы данных находится здесь. Дополнительный вопрос для тех, кто имеет опыт работы с scalajs-реагированием (вы там @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, вы можете следовать Руководству по патчированию обезьян (извините, якоря нет, ищите термин):

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