Aurelia 观察者未触发阵列

Question

我有一个简化的自定义数据网格元素，如下所示:

export class DataGrid {

  @bindable data;

  dataChanged(newValue, oldValue) {
    console.log("Sensing new data...", newValue);
  }
}

它的实例化如下:

<data-grid data.bind="records"></data-grid>

“正在检测新数据...”，当数据网格出现时，记录数组将显示在控制台中。但是，当我从对象数组中删除记录时，不会触发 dataChanged() 函数。

let index = this.records.findIndex((r) => { return r.acc_id === this.record.acc_id; });
if (index > -1) {
  console.log("Deleting element..." + index, this.records);
  this.records.splice(index, 1);
}

我在控制台中看到“正在删除元素...”，但没有看到“正在检测新数据...”。

知道为什么当我拼接记录时 dataChanged() 没有触发吗？

Answer 1

您无法观察数组中的此类突变。您必须使用 collectionObserver 来代替。现在，只有覆盖 data 值(即 data = [1, 2, 3] 覆盖)时，您的 dataChanged() 才会触发它与一个新数组)。

<小时/>

示例如何根据您的用例使用 BindingEngine 类中的 collectionObserver:

import { BindingEngine } from 'aurelia-framework';

export class DataGrid {
  static inject = [BindingEngine];

  @bindable data;

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

  attached() {
    this._dataObserveSubscription = this._bindingEngine
      .collectionObserver(this.data)
      .subscribe(splices => this.dataArrayChanged(splices));
  }

  detached() {
    // clean up this observer when the associated view is removed
    this._dataObserveSubscription.dispose();
  }


  dataArrayChanged(splices) {
    console.log('Array mutated', splices);
  }
}