Question

我正在aurelia中编写一个自定义属性，在我的属性类中，我有一个名为“ visibility”的可绑定属性。然后从外部（父组件）绑定到此属性并更改该组件上的值，则触发visibilityChanged，但是在我的属性类中，当我更改该值时，不会调用visibilityChanged方法。 / p>

例如：

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？

Answer 1

我找到了答案，并在这里写下来。问题在于上下文发生了变化，而不是变化事件的传播。

我已将_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));
    }
  }

可以看出，问题不在于aurelia，而是与JavaScript上下文本身有关，但使我感到困惑。希望这对其他人有帮助。 TG。

Aurelia对自己的属性进行更改不会调用更改的侦听器

1 个答案: