typescript - 更改集合时不会触发Aurelia CollectionObserver处理程序

我有一个aurelia组件，它只显示一个项目列表。组件的模型具有可绑定的“items”属性：

@bindable items = [];

组件模板使用简单的repeat属性显示列表：

 <div repeat.for="item of items">
    ${item.id}   </div>

当我从使用组件的页面视图模型中推送绑定数组中的新项时，我可以看到在刷新列表和显示新项时添加的项。
我的问题是，当“items”数组被修改时，我需要执行其他操作，因此我试图将collectionobserver添加到组件中，如下所示：

import {BindingEngine, inject} from 'aurelia-framework';

@inject(BindingEngine)
export class GridControl {

  @bindable items = [];

  constructor(bindingEngine) {
    this.items = [];
    let subscription = bindingEngine.collectionObserver(this.items)
                                    .subscribe(this.listChanged);
  }

  listChanged(splices) {
    // do some stuff
  }
}

但我的“listchanged”处理程序从未被调用。知道为什么吗？

最佳答案

在构造函数中，bindingEngine.collectionObserver(this.items)被调用。
稍后，当组件被数据绑定时，会通过数据绑定为this.items分配一个不同的数组实例。此不同的数组实例不是传递给绑定引擎进行观察的实例。
尝试这样做：

import {BindingEngine, inject} from 'aurelia-framework';

@inject(BindingEngine)
export class GridControl {
  @bindable items;

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  listChanged(splices) {
    // do some stuff
  }

  subscribeItems() {
    if (this.items) {
      this.subscription = this.bindingEngine.collectionObserver(this.items)
        .subscribe(splices => this.listChanged(splices));
    }
  }

  unsubscribeItems() {
    if (this.subscription) {
      this.subscription.dispose();
      this.subscription = null;
    }
  }

  itemsChanged() {
    this.unsubscribeItems();
    this.subscribeItems();
  }

  unbind() {
    this.unsubscribeItems();
  }
}

关于typescript - 更改集合时不会触发Aurelia CollectionObserver处理程序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40979144/