Как использовать библиотеки JavaScript, которые требуют привязки к узлам DOM - PullRequest
Новая
       7

Как использовать библиотеки JavaScript, которые требуют привязки к узлам DOM

1 голос
/ 06 мая 2019

Я пытался использовать Ag-Grid с Svelte.Я понимаю, что основная проблема с использованием этой библиотеки сетки заключается в том, что она должна быть связана с элементом dom, который может не существовать во время выполнения кода.Например: 

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

В этом случае элемент #myGrid еще не существует.

Я попытался создать элемент, а затем поместить его в часть HTML компонента Svelte,вот так. 

let eGridDiv = document.createElement("DIV"); 
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);

И затем вниз в разделе HTML 

<eGridDiv />

Однако новый элемент, похоже, не инициализируется Ag-Grid.

Так каков рекомендуемый способ использования этих типов библиотек в Svelte?

enter image description here

1 Ответ

2 голосов
/ 07 мая 2019

Если вы хотите использовать узел DOM в части сценария вашего компонента, вы можете использовать bind:this={domNode} привязку элемента , чтобы получить ссылку на него, а затем использовать его после визуализации компонента.в onMount. 

<script>
  import { onMount } from 'svelte';
  let domNode;

  // ...

  onMount(() => {
    const gridOptions = { columnDefs: columnDefs, rowData: $orders };
    new Grid(domNode, gridOptions);
  });
</script>

<div bind:this={domNode} />
...