如何使用需要绑定到 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} element binding to get a reference to it, and then use it after the component has been rendered in onMount.

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

  // ...

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

<div bind:this={domNode} />

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

How to use javascript libraries that require binding to DOM nodes

ag-grid

svelte