Как наблюдать изменения свойств с LitElement - PullRequest
Новая
       14

Как наблюдать изменения свойств с LitElement

0 голосов
/ 18 мая 2018

Я не знаю, как наблюдать изменения свойств в LitElement.

Я пробовал эти методы, но я не мог заставить их работать: 

  static get properties() {
    return {
      temp1:String,
      temp2: {
       type:String,
       observer: '_temp2Changed'
        }
  };

  temp1Changed(newValue, oldValue){
    console.log("temp1 changed")
  }
  _temp2Changed(newValue, oldValue){
    console.log("temp2 changed")
  }

Ответы [ 4 ]

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

Я лично переопределяю метод requestUpdate, чтобы быть в курсе изменений перед рендерингом.

Мой пример использования - перехватить изменение атрибута label для запуска асинхронного запроса данных.

Фрагмент ниже (в TypeScript): 

@customElement('my-element')
export default class MyElement extends LitElement {

    @property({type: String})
    label: string | null = null;

    @property({attribute: false})
    private isLoading: boolean = false;

    @property({attribute: false, noAccessor: true})
    private data: MyData | null = null;

    protected render() {/*some code*/}

    requestUpdate(name?: PropertyKey, oldValue?: unknown) {
        if(name && name == "label" && this.label !== oldValue) {
            this.isLoading = true;
            requestData(this.label, this._callbackData);
        }
        return super.requestUpdate(name, oldValue);
    }

    private _callbackData(data: MyData}) {
        this.data = data;
        this.isLoading = false;
    }

}

Таким образом, мой элемент отображается только дважды: один с новой меткой и загружается как true, а другой - когда данные доступны.

0 голосов
/ 13 сентября 2018

LitElement автоматически перерисовывает каждый раз, когда свойство изменяется, если свойство определено в вашем методе _render.

Это отмечено в LitElement readme :

Реакция на изменения : LitElement реагирует на изменения свойств и атрибутов асинхронным рендерингом, обеспечивая пакетирование изменений.Это уменьшает накладные расходы и поддерживает согласованное состояние.

Например: 

_render({firstName, lastName}) {
  return html`
    <div> Hello ${firstName} ${lastName} </div>
  `
};

Будет перерисовываться каждый раз при изменении свойств firstName и lastName.Я надеюсь, что это обеспечивает немного ясности.

0 голосов
/ 22 сентября 2018

Версия 0.6.0 +

Сначала необходимо указать свойства элемента.Вы можете сделать это, создав статический геттер, который возвращает объект, включающий их имена в качестве ключей и их конфигурацию, связанную с атрибутами.

Метод жизненного цикла updated будет вызван, когда измененные свойства вызвали повторную визуализацию.Первый аргумент будет возвращать значения до обновления. 

class MyComponent extends LitElement {
  static get properties() {
    return {
      foo: {}
    };
  }

  constructor() {
    super();
    this.foo = 0;
    setInterval(() => this.foo++, 1000);
  }

  updated(changedProperties) {
    console.log(changedProperties); // logs previous values
    console.log(this.foo); // logs current value
  }

  render() {
    return html`${this.foo}`;
  }
}

customElements.define("my-component", MyComponent);
0 голосов
/ 18 мая 2018

Я нашел решение из набора Polymer PWA Starter.

Добавьте следующее к определению вашего элемента: 

_propertiesChanged(props, changed, oldProps) {
    console.log("_propertiesChanged(props, changed, oldProps):");
    console.log(props);    
    console.log(changed);  
    console.log(oldProps); 
    if (changed && 'temp1' in changed) {
      console.log("if temp1:"+changed.temp1);
    }
    super._propertiesChanged(props, changed, oldProps); //This is needed here
}

console output:
_propertiesChanged(props, changed, oldProps):
{temp1: "newVal1", temp2: "val2"}
{temp1: "newVal1"}
{temp1: "val1"}
if temp1:newVal1
...