アウレリアの観察者が、私はこのように単純化したカスタムデータグリッド要素持って配列

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を使用する必要があります。現在、dataChanged()は、dataの値を上書きすると（つまり、data = [1, 2, 3]は新しい配列で上書きされます）、起動します。

---

どのようにあなたのユースケースのために、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); 
    } 
}