LitElement получает обновленное значение атрибута, когда для свойства установлено новое значение - PullRequest
Новая
       18

LitElement получает обновленное значение атрибута, когда для свойства установлено новое значение

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

Я хочу, чтобы атрибут обновлялся, когда для свойства было установлено новое значение.поэтому я вызвал element.requestUpdate(), чтобы получить обновленный атрибут, но requestUpdate является асинхронным.Есть ли другой способ получить обновленный атрибут без вызова requestUpdate?Stackblitz URL => https://stackblitz.com/edit/typescript-nojnqa

LitElement получает обновленный атрибут

1 Ответ

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

Свойства и атрибуты

На самом деле вам не нужно вручную обновлять атрибуты при изменении свойств: lit-element имеет встроенную функциональность для отражения изменений свойств в атрибутах.

Из документация :

Можно настроить свойство таким образом, чтобы при каждом изменении его значение отражалось в наблюдаемом атрибуте.Например: 

// Value of property "myProp" will reflect to attribute "myprop"
myProp: { reflect: true }

В вашем примере вы уже используете reflect: true, но вы объявляете свойства с помощью нотации JS в среде TS.

Это:

static get properties() {
  return {
    name: {
      type: String,
      reflect: true
    }
  }
}

должно быть следующим: 

@property({
  reflect: true,
})
name: string;

Время

Тогда возникает небольшая проблема с синхронизацией.Этот код, который вы вводите в index.html: 

<script>
  (async function() {
    const element = document.querySelector('#app').querySelector('hello-name')
    element.name = 'Maria'
    await element.requestUpdate()

    console.log(element.getAttribute('name')) //// result => Maria
  })()
</script>

, запускается после пользовательского элемента, добавляемого в dom, но до логики свойства LitElement.Если вы попытаетесь отложить выполнение этого кода, то обнаружите, что отражение атрибута свойства LitElement будет работать, как и ожидалось.

Ожидание обновления

Вызов element.requestUpdate() не требуется, посколькуСеттер element.name = ... уже вызывает requestUpdate() под капотом.

Для этого типа сценария LitElement имеет геттер, updateComplete, который возвращает обещание, которое разрешается после завершения цикла обновления.. 

element.name = 'Maria';
await element.updateComplete;
console.log(element.getAttribute('name')); // Maria

Наконец, если вас беспокоит вопрос использования async / await, существует несколько альтернатив:

  • , заменяющих async / await с Promise#then()/catch(),
  • с использованием setImmediate() / setTimeout() для ожидания завершения обновления микрозадачи,
  • , запускающим Event при изменении атрибута.

Здесь - это форк вашего StackBlitz с возможным решением.

...