更改集合時不會觸發Aurelia CollectionObserver處理程序

Question

我有一個Aurelia組件，只應該顯示項目列表。 組件的模型具有可綁定的“ items”屬性：

@bindable items = [];

組件模板使用簡單的重復屬性顯示列表：

 <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”處理程序從未被調用。 知道為什么嗎？

Answer 1

在構造函數中， 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();
  }
}