Data binding Aurelia对自身属性的更改不调用更改的侦听器

我正在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

？

我找到了答案并将其写在这里。问题在于上下文被更改，而不是更改事件的传播

我已经将

\u 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);
    }
  }

这样，在

\u onElementFocused

函数中，this指调用事件的元素。因此

this.visibility=true更改该元素而不是viewmodel（自定义属性类）上的可见性属性。所以我把它的调用改为箭头函数类型，现在一切都正常了。像这样：

  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