Aurelia Beobachter nicht für Array Brennen

Question

ich eine benutzerdefinierte Datenraster Element wie folgt vereinfacht:

export class DataGrid { 

    @bindable data; 

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

es wie folgt instanziiert ist:

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

"Sensing neue Daten ..." und Das Array der Datensätze wird in der Konsole angezeigt, wenn das Datenraster angezeigt wird. Wenn ich jedoch einen Datensatz aus dem Array von Objekten lösche, wird die Funktion dataChanged() nicht ausgelöst.

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

ich "Löschen Element ..." in der Konsole aber nicht "Sensing neue Daten ...".

Irgendwelche Ideen, warum dataChanged() nicht feuert, wenn ich einen Rekord splice?

Answer 1

Sie können ein Array für solche Mutationen nicht beobachten. Sie müssen stattdessen einen collectionObserver verwenden. Ihr dataChanged() würde jetzt nur ausgelöst, wenn Sie den data Wert überschreiben (dh data = [1, 2, 3], der es mit einem neuen Array überschreibt).

---

Beispiel, wie Sie mit den collectionObserver aus der BindingEngine Klasse, für Ihre usecase:

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