Aurelia 自行更改属性不会调用已更改的侦听器

Question

我正在 aurelia 和我的属性 class 中编写自定义属性，我有一个名为 'visibility' 的可绑定属性。然后从外部（父组件）绑定到此属性并更改该组件上的值，触发 visibilityChanged 但在我的属性 class 中，当我更改值时， 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');
  }
}

我应该如何更改 class 中的属性值，以便更改调用 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 属性而不是视图模型（自定义属性 class）上的。所以我将它的调用更改为箭头函数类型，现在一切正常。像这样：

  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 自行更改属性不会调用已更改的侦听器

Aurelia change on own property does not call changed listener

data-binding

custom-attributes

aurelia

Aurelia 自行更改 属性 不会调用已更改的侦听器

Aurelia change on own property does not call changed listener

data-binding

custom-attributes

aurelia

Aurelia 自行更改属性不会调用已更改的侦听器