Получение списка узлов с помощью querySelectorAll () - PullRequest
Новая
       72

Получение списка узлов с помощью querySelectorAll ()

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

Учитывая следующий пример кода: 

import { LitElement, html, css } from 'lit-element';

class ItemsDisplay extends LitElement {

    static get styles() {...}
    static get properties {...}

    constructor () {
        super();
        ...
    }

    render {
        return html`
            ${this.items.map((item, index, array) => html`
                <div class="name">
                    ...
                </div>
            `)}        
        `;
    }
}

Как правильно выбрать все узлы с классом «имя»?

Я пробовал следующие способы, но не удалось ;все времена nodesList было undefined:

  • Внутри constructor: 
  this.nodesList = this.shadowRoot.querySelectorAll(".name");
  • Использование: 
  firstUpdated(changedProperties) {
      return this.nodesList = this.shadowRoot.querySelectorAll(".name");
  }
  • Внутри пользовательской функции: 
  getNodesList() {
      let nodesList = this.shadowRoot.querySelectorAll(".name");
      ...
  }

Я также пытался с: 

connectedCallback() {
    super.connectedCallback();
    return this.nodesList = this.shadowRoot.querySelectorAll(".name");
}

Ожидание чтения решения.

Tia

1 Ответ

0 голосов
/ 01 марта 2019

Вы не должны пытаться получить доступ к узлу DOM в конструкторе, потому что они еще не будут доступны.

Лучшее место для запроса узлов DOM - это обратный вызов жизненного цикла firstUpdated(), который вызывается послев первый раз DOM вашего элемента был обновлен.Вам также не нужно возвращать его из firstUpdated, вы можете просто сделать что-то вроде: 

  firstUpdated(changedProperties) {
    // Store a reference to the form element for easy access
    this.$someNode = this.shadowRoot.querySelector('div');

Некоторые примеры этого можно посмотреть по адресу: https://stackblitz.com/edit/open-wc-lit-demos?file=02-intermediate%2F05-querying-dom.js

https://stackblitz.com/edit/open-wc-lit-demos?file=02-intermediate%2F01-first-updated.js

Кроме того, если вы используете TypeScript, вы можете использовать декоратор query: 

@query('div')
myDiv;

Дополнительная информация: https://github.com/Polymer/lit-element/blob/master/src/test/lib/decorators_test.ts#L326

...