Как использовать селекторы элементов JQuery DOM в Polymer? - PullRequest
Новая
       32

Как использовать селекторы элементов JQuery DOM в Polymer?

0 голосов
/ 12 февраля 2019

Я пытался реализовать jsGrid в Polymer, но застрял там, где требовалось получить целевой 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" }
          ]
      });


  }

Сетка не отображается на html-странице, когда я использую $("#jsGrid").Это может быть связано с тем, что метод jsGrid() не может получить элемент DOM с необходимыми свойствами, когда я заменяю $("#jsGrid") на this.shadowRoot.querySelector("#jsGrid") или document.getElementById("jsGrid")

Заранее спасибо!

...