0

我试图在 Polymer 中实现 jsGrid，但被困在需要将目标网格 DOM 元素获取到jsGrid()函数的地方。无法$("#jsGrid")在聚合物中产生等效物。

我已经使用该import命令在聚合物组件文件本身中导入了所有必需的源文件。

// 渲染函数

render(){
    return html`
      ${jsGrid_css}
      ${jsGrid_theme_css}
      <h2>Hello ${this.name}!</h2>
      <div id="jsGrid"></div>
    `;
  }

// 渲染网格方法

renderGrid(){
    const gridEle = document.getElementById("jsGrid")
    const gridNode = this.shadowRoot.querySelector("#jsGrid");

    console.log($("#jsGrid"))
    //--> output to this shows no element

    $("#jsGrid").jsGrid({
          width: "100%",
          height: "400px",

          inserting: true,
          editing: true,
          sorting: true,
          paging: true,

          data:this.clients,

          fields: [
              { name: "Name", type: "text", width: 150, validate: "required" },
              { name: "Age", type: "number", width: 50 },
              { name: "Address", type: "text", width: 200 },
              { name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
              { type: "control" }
          ]
      });


  }

当我使用$("#jsGrid"). 这可能是因为当我替换 为 或替换时，jsGrid()方法无法获取具有所需属性的 DOM 元素$("#jsGrid")this.shadowRoot.querySelector("#jsGrid")document.getElementById("jsGrid")

提前致谢！

4

1 回答 1

0

jQuery 对页面的构建方式做了一些假设，这些假设在 2008 年非常有用，但不能很好地与 Lit 等现代库配合使用。

首先，$("#jsGrid")基本上是document.querySelector("#jsGrid")带有大量包装函数。回到 jQuery 推出querySelector的时候，支持有限，jQuery 为你处理了所有的浏览器，但现在真的不需要了。

jQuery 早在 Shadow DOM 之前就存在了，并且对此一无所知 - 你不能对 Shadow DOM 和 做任何事情$，但你在正确的轨道上使用this.shadowRoot. 一旦你有了元素jQuery 不需要另一个查询路径，你可以传递元素：

const gridNode = this.shadowRoot.querySelector("#jsGrid");

$(gridNode).jsGrid({...

但是，这不会很稳定 - jQuery 在 LitElement 构建的模板中构建 DOM，您需要确保在调用它之前已经构建了 DOM（renderGrid从内部调用firstUpdated应该足够了）。LitElement 可能会更改模板化的 DOM，并且在更改时可能会重置您的网格。

于 2021-05-04T19:16:57.517 回答