Aurelia-Bindung, binden Sie eine Funktion an eine Eigenschaft eines Objekts, ohne propertyObserver

Question

So normalerweise, wenn ich eine Variable abonnieren möchte, würde ich nur die Variable deklarieren und eine Funktion mit dem Variablennamen, gefolgt von dem Wort "Geändert 'am Ende der Funktion wie folgt:

test = ''; 

testChanged() { 
// do stuff here 
} 

Aurelia bietet eine sehr gute Möglichkeit, dies zu handhaben. Aber was mache ich, wenn ich auf eine Eigenschaft abonnieren möchten, die ohne Verwendung der bindingEngine.propertyObserver

Zum Beispiel innerhalb eines Objekts ist:

model = { 
    a: '', 
    b: '' 
} 

Wie abonniere ich model.a wie oben die Verwendung dieser Konvention?

Answer 1

Sie möchten die Object.defineProperty-Methode verwenden, um objektspezifische Eigenschaften für Änderungen anzuzeigen. Ich glaube, dass die Aurelia @bindable und @observable Methoden hinter den Kulissen in den meisten Fällen arbeiten.

Object.defineProperty(this.model, 'a', { 
    configurable: true, 
    enumerable: true, 
    get:() => { 
     return this.model.__a; 
    }, 
    set: (v) => { 
     this.model.__a = v; 
     this.modelChanged(v); 
    } 
}); 

Der erste, was wert innerhalb der Setter-Methode ist erwähnen set Sie nicht den ursprünglichen Wert eingestellt werden, sonst wird es eine rekursive Schleife auslösen und einen Stapel Fehler werfen, so dass Sie den Wert zu einem Doppelstrich zuweisen Präfix Name, ähnlich einer temporären versteckten Variable.

definieren Dann ist unser Callback-Funktion innerhalb unserer Klasse:

modelChanged(value) { 
    console.log(value); 
} 

Schließlich binden sie alle zusammen und setTimeout Test verwenden:

export class MyViewModel { 
    model = { 
     a: '', 
     b: '' 
    };  

    constructor() { 
     Object.defineProperty(this.model, 'a', { 
      configurable: true, 
      enumerable: true, 
      get:() => { 
       return this.model.__a; 
      }, 
      set: (v) => { 
       this.model.__a = v; 
       this.modelChanged(v); 
      } 
     }); 

     setTimeout(() => { 
      this.model.a = 'HELLO!'; 
     }, 3000); 
    } 

    modelChanged(value) { 
     console.log(value); // After 3 seconds, this should be "HELLO!" in the browser console. 
    } 
} 

all diesen Worten Bemerkenswert ist die bindingEngine.propertyObserver Funktionalität im Wesentlichen die gleiche Sache unter der Haube. Ich würde ehrlich darüber nachdenken, einfach propertyObserver zu verwenden, anstatt einen Haufen Zeilen Code in Ihre App einzubringen, um eine Eigenschaft zu sehen.