Изменение Aurelia на собственное имущество не вызывает измененного слушателя - PullRequest
Новая
       35

Изменение Aurelia на собственное имущество не вызывает измененного слушателя

0 голосов
/ 17 декабря 2018

Я пишу пользовательский атрибут в aurelia, и в моем классе атрибутов у меня есть привязываемое свойство с именем 'видимость'.Затем при привязке к этому свойству извне (родительский компонент) и изменении значения этого компонента запускается visibilityChanged, но в моем классе атрибутов при изменении значения метод visibilityChanged не вызывается.

Например: 

export class PaOnScreenKeyboardCustomAttribute {
  @bindable visibility = false;

  visibilityChanged(newValue, oldValue) {
    console.log('change visibility');
    if (this.keyboardElement) {
      this.keyboardElement.style.display = newValue ? 'initial' : 'none';
    }
  }

  _onElementFocused(event) {
    // let htmlElement = this; // use this if needed
    this.visibility = true;
    console.log('show');
  }

  _onElementDefocused(event) {
    // let htmlElement = this; // use this if needed
    this.visibility = false;
    console.log('hide');
  }
}

Как мне изменить значение свойства внутри класса, чтобы изменение вызовов visibilityChanged?

1 Ответ

0 голосов
/ 18 декабря 2018

Я нашел ответ и записал его здесь.Проблема была в изменении контекста, а не в распространении события изменения.

Я установил _onElementFocused в качестве прослушивателя поверх события фокуса элемента, и я передавал функцию, а не использовал функции стрелок или что-то еще,Смотрите это: 

  showOnFocusChanged(newValue, oldValue) {
    if (newValue === true || newValue === 'true') {
      this.element.addEventListener('focus', this._onElementFocused);
      this.element.addEventListener('focusout', this._onElementDefocused);
    } else {
      this.element.removeEventListener('focus', this._onElementFocused);
      this.element.removeEventListener('focusout', this._onElementDefocused);
    }
  }

таким образом, в функции _onElementFocused this ссылается на элемент, который вызывает событие.Таким образом, this.visibility = true; изменяет свойство visibility для этого элемента, а не для модели представления (класс пользовательских атрибутов).Поэтому я изменил вызов функции типа стрелки, и теперь все идет как надо.Примерно так: 

  showOnFocusChanged(newValue, oldValue) {
    if (newValue === true || newValue === 'true') {
      this.element.addEventListener('focus', (event) => this._onElementFocused(event));
      this.element.addEventListener('focusout', (event) => this._onElementDefocused(event));
    } else {
      this.element.removeEventListener('focus', (event) => this._onElementFocused(event));
      this.element.removeEventListener('focusout', (event) => this._onElementDefocused(event));
    }
  }

Как видно, проблема была не в аурелии, а в самом контексте javascript, но меня смущало.Надеюсь, что это помогает другим.TG.

...