Aurelia watcher doesn't shoot from an array

Question

I have a custom data grid element simplified as follows:

export class DataGrid {

  @bindable data;

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

It is created this way:

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

"Defining new data ..." and an array of records is displayed in the console when a data grid appears. However, when I delete a record from an array of objects, the function dataChanged()does not start.

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

I get "Delete item ..." in the console, but not "Sensitivity of new data ...".

Any ideas why it dataChanged()doesn't work when I connect the record?

Answer 1

. collectionObserver. dataChanged() data (.. data = [1, 2, 3], ).

---

collectionObserver BindingEngine :

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