如何使用需要绑定到 DOM 节点的 javascript 库

Question

我一直在尝试将 Ag-Grid 与 Svelte 结合使用。我知道使用这个网格库的主要问题是它需要绑定到一个在代码执行时可能不存在的 dom 元素。例如：

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

在这种情况下，#myGrid 元素尚不存在。

我尝试创建一个元素，然后将它放在 Svelte 组件的 HTML 部分，就像这样。

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

然后在 HTML 部分

<eGridDiv />

但是，新元素似乎没有被 Ag-Grid 初始化。

那么在 Svelte 中使用这些类型的库的推荐方法是什么？

Answer 1

如果您想在组件的脚本部分使用 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} />