Wie Observables in KnockoutJs funktionieren

Dieser Inhalt ist im Grunde eine Übersetzung der Originalmaterialien. Ziel ist es, mehr über KnockoutJs für Magento 2 zu erfahren und Inhalte auf Portugiesisch über KnockouJs zu erstellen.

Dokumentation

• KnockoutJs: Observables
• KnockoutJs: Observables Arrays
• KnockoutJs: Berechnete Observablen
• KnockoutJs: Beschreibbare berechnete Observablen
• KnockoutJs: Pure Computed Observables
• KnockoutJs: Berechnete Observablen

Observable

KnockoutJs führt das Konzept von Observablen ein, bei denen es sich um Eigenschaften handelt, die überwacht und automatisch aktualisiert werden können, wenn sich ihre Werte ändern. Diese Funktionalität ermöglicht es der Benutzeroberfläche, dynamisch auf Änderungen in Modell.

Um ein Observable in KnockoutJs zu erstellen, können Sie die Funktion ko.observable() verwenden und ihr einen Anfangswert zuweisen. Um auf den aktuellen Wert einer Observable zuzugreifen, können Sie sie als Funktion behandeln. Um einfach etwas ohne Anfangswert zu beobachten, rufen Sie einfach die Eigenschaft Observable ohne Parameter auf.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

• ko.isObservable: gibt true für Observablen, Observablen-Arrays und alle berechneten Observablen zurück;
• ko.isWritableObservable: gibt true für Observablen, Observable Arrays und beschreibbar berechnete Observablen zurück.

Abonnements

Die Abonnements in Observablen sind Mechanismen, die es Ihnen ermöglichen, benachrichtigt zu werden, wenn sich der Wert eines Observablen ändert. Sie sind wichtig, um Änderungen in Observablen zu verfolgen und auf diese Änderungen zu reagieren, die Benutzeroberfläche zu aktualisieren oder bei Bedarf andere Maßnahmen zu ergreifen.

Die subscribe()-Methode ***empfängt eine *Callback-Funktion, die immer dann ausgeführt wird, wenn der Wert des Observable geändert wird. Die Funktion Callback erhält als Argument den neuen Wert des Observablen. Diese Funktion akzeptiert drei Parameter: callback ist die Funktion, die immer dann aufgerufen wird, wenn die Benachrichtigung erfolgt, target (optional) definiert den Wert davon in der Funktion callback und Ereignis (optional; Standardeinstellung ist „Ändern“) ist der Name des Ereignisses, das eine Benachrichtigung erhalten soll.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

1. change: Dies ist das Standardereignis, das das Abonnement immer dann auslöst, wenn sich der Wert des observable ändert. Es ist das häufigste Ereignis und wird verwendet, wenn kein anderes Ereignis explizit angegeben ist;
2. beforeChange: Dieses Ereignis wird ausgelöst, bevor der Wert der Observable geändert wird. Die Funktion Callback erhält zwei Argumente: den aktuellen Wert des Observablen und den vorgeschlagenen (neuen) Wert, der dem Observablen zugewiesen wird. Dadurch können Sie Aktionen basierend auf dem aktuellen Wert ausführen, bevor dieser geändert wird;
3. afterChange: Dieses Ereignis wird ausgelöst, nachdem der Wert des Observablen geändert wurde. Die Rückruffunktion erhält zwei Argumente: den vorherigen Wert des Observablen (vor der Änderung) und den neuen Wert, der dem Observablen zugewiesen wurde. Dies ist nützlich, wenn Sie auf eine bestimmte Änderung reagieren müssen, nachdem diese eingetreten ist.
4. arrayChange: Dieses Ereignis ist spezifisch für Observables-Arrays. Es wird ausgelöst, wenn eine Änderung an einem beobachtbaren Array erfolgt, beispielsweise das Hinzufügen, Entfernen oder Ersetzen von Elementen im Array. Die Rückruffunktion benötigt vier Argumente: die betroffenen Elemente (hinzugefügt, gelöscht, Status und Index).

Ein weiterer wichtiger Punkt ist, dass es möglich ist, das Abonnement in einer Variablen zu speichern und das Abonnement bei Bedarf über die Methode dispose() zu kündigen. Dies ist nützlich, wenn Sie die Aktualisierung der Benutzeroberfläche als Reaktion auf Änderungen in Observablen vorübergehend oder dauerhaft deaktivieren möchten.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

Methoden zur Bestimmung der Arten von Observablen

1. isObservable(): Mit dieser Methode wird überprüft, ob ein Wert ein observable ist. Es gibt true zurück, wenn der Wert ein observable ist (observable, observableArray, berechnet oder beschreibbar berechnet), andernfalls false.
2. isWritableObservable(): Diese Methode prüft, ob ein Wert ein beschreibbares observable (beschreibbares Observable) ist. Es gibt „true“ zurück, wenn der Wert eine beschreibbare Observable ist, andernfalls „false“;
3. isComputed(): Mit dieser Methode wird überprüft, ob ein Wert ein Computed Observable ist. Es gibt true zurück, wenn der Wert eine berechnete Observable ist, andernfalls false;
4. isPureComputed(): Diese Methode prüft, ob ein Wert ein Pure Computed Observable ist. Ein Rein berechnetes Observable ist eines, das nur von anderen reinen Observablen abhängt und über keine interne Aufzeichnungslogik verfügt. Es gibt „true“ zurück, wenn der Wert eine reine berechnete Observable ist, andernfalls „false“.

Beobachtbare Arrays

Observables Arrays sind eine Erweiterung von Observablen und werden für den Umgang mit Listen von Daten verwendet, die beobachtbar sein müssen. Im Gegensatz zu einem Standard-JavaScript-Array ermöglicht Ihnen ein Observable Array, Änderungen an Listendaten automatisch zu verfolgen und die Benutzeroberfläche reaktiv zu aktualisieren.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Observables Arrays verfügen über spezielle Methoden, mit denen Sie Elemente reaktiv hinzufügen, entfernen und bearbeiten können. Einige dieser Methoden sind:

• indexOf(value): Gibt den Index des ersten Elements des Arrays zurück, das seinem Parameter entspricht, oder den Wert -1, wenn kein passender Wert gefunden wird.
• push(item): Fügt ein neues Element am Ende des Array;
hinzu
• pop(): Entfernt das letzte Element aus dem array; und gibt es zurück
• shift(): Entfernt das erste Element aus dem Array;
und gibt es zurück
• unshift(item): Fügt ein neues Element am Anfang des Array;
hinzu
• Remove(item): Entfernt ein bestimmtes Element aus dem Array;
• RemoveAll([Parameter]): Entfernt alle Elemente aus dem Array und kann einen Parameter in Form eines Array empfangen, der die Elemente innerhalb der übergebenen Parameter entfernt;
• replace(oldItem, newItem): Ersetzt das im ersten Parameter übergebene Element durch den zweiten Parameter;
• reverse(): Ändert die Reihenfolge der Elemente im ursprünglichen Array und aktualisiert die Benutzeroberfläche, um die neue Reihenfolge widerzuspiegeln;
• reversed(): Gibt eine umgekehrte Kopie des Arrays zurück;
• splice(index, count, items): Ermöglicht das Hinzufügen oder Entfernen von Elementen an einer bestimmten Position im Array;
• Slice(): Gibt eine Kopie einer Teilmenge des Array zurück, beginnend beim Startindex und bis zum End-1-Index. Die Start- und Endwerte sind optional, und wenn nicht angegeben;
• sort(): Bestimmt die Reihenfolge der Elemente. Wenn die Funktion nicht bereitgestellt wird, sortiert die Methode die Elemente in aufsteigender alphabetischer Reihenfolge (für Zeichenfolgen) oder in aufsteigender numerischer Reihenfolge (für Zahlen);
• sorted(): Gibt eine Kopie des sortierten Arrays zurück. Sie ist der Methode sort() vorzuziehen, wenn Sie das ursprüngliche observable Array nicht ändern, es aber in einer bestimmten Reihenfolge anzeigen müssen;

Bei Funktionen, die den Inhalt des Arrays ändern, wie z. B. push und splice, lösen die KO-Methoden automatisch den Abhängigkeitsverfolgungsmechanismus aus, sodass alle registrierten Listener über die Änderung benachrichtigt werden und Ihre Schnittstelle wird automatisch aktualisiert, was bedeutet, dass es einen erheblichen Unterschied zwischen der Verwendung von KO-Methoden (observableArray.push(...) usw.) und nativen JavaScript-array-Methoden (observableArray() .push(..) gibt. .)), da letztere keine Benachrichtigung an Array-Abonnenten senden, dass sich ihr Inhalt geändert hat.

Während es möglich ist, subscribe zu verwenden und wie jedes andere Observable auf ein observableArray zuzugreifen, bietet KnockoutJs auch eine superschnelle Methode, um herauszufinden, wie ein Array funktioniert Observable hat sich geändert (welche Elemente gerade hinzugefügt, gelöscht oder verschoben wurden). Sie können Array--Änderungen wie folgt abonnieren:

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Berechnete Observablen

Berechnete Observablen sind Funktionen, die von einem oder mehreren Observablen abhängen und automatisch aktualisiert werden, wenn sich eine dieser Abhängigkeiten ändert. Die Funktion wird jedes Mal aufgerufen, wenn sich eine ihrer Abhängigkeiten ändert, und jeder zurückgegebene Wert wird an die Observablen übergeben, wie z. B. UI-Elemente oder andere berechnete Observablen.

Der Hauptunterschied zwischen Berechneten Observablen und Observablen besteht darin, dass Berechnete Observablen keinen Wert direkt speichern; Stattdessen verlassen sie sich auf andere Observablen, um ihren Wert zu berechnen. Dies bedeutet, dass der Wert einer Berechneten Observable immer automatisch aktualisiert wird, wenn eine der Observablen, von denen sie abhängt, geändert wird.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

Methoden einer berechneten Observable

1. dispose(): Diese Methode wird verwendet, um ein berechnetes Observable zu entsorgen (zu bereinigen), wenn es nicht mehr benötigt wird. Es entfernt alle Abonnements und Abhängigkeiten, die mit Computed Observable;
verbunden sind
2. extension(): Mit dieser Methode können Sie benutzerdefinierte Extender zu einem Berechneten Observablen hinzufügen. Extender sind Funktionen, die das Verhalten von Computed Observable; ändern können
3. getDependenciesCount(): Diese Methode gibt die Anzahl der Observablen zurück, abhängig von der Berechneten Observablen;
4. getDependencies(): Diese Methode gibt ein Array zurück, das die Observablen enthält, die Abhängigkeiten des Berechneten Observablen;
sind
5. getSubscriptionsCount(): Diese Methode gibt die Anzahl der aktuellen Abonnements aus dem Computed Observable;
zurück
6. isActive(): Diese Methode gibt einen booleschen Wert zurück, der angibt, ob das Berechnete Observable derzeit aktiv ist (ein Berechnetes Observable ist aktiv, wenn es aufgrund einer Änderung gerade ausgewertet wird in seinen Abhängigkeiten );
7. peek(): Diese Methode ähnelt dem Klammeroperator (), der verwendet wird, um auf den aktuellen Wert eines berechneten Observablen zuzugreifen. Die Peek-Methode erzeugt jedoch keine Abhängigkeit zwischen dem Berechneten Observablen und dem Ort, an dem es aufgerufen wird;
8. subscribe(): Mit dieser Methode können Sie sich anmelden, um Benachrichtigungen zu erhalten, wenn sich der Wert von Computed Observable ändert.

Das

Der zweite Parameter von ko.computed legt den Wert fest, wenn die berechnete Observable ausgewertet wird. Ohne die Übergabe wäre es nicht möglich, auf this.firstName() oder this.lastName() zu verweisen.

Es gibt eine Konvention, die eine vollständige Nachverfolgung vermeidet: Wenn der Konstruktor Ihres Ansichtsmodells einen Verweis darauf in eine andere Variable (traditionell „self“ genannt) kopiert, können Sie „self“ in Ihrem gesamten Ansichtsmodell und Sie müssen sich keine Sorgen machen, dass es neu definiert wird, um auf etwas anderes zu verweisen.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

berechneten Observablen. Diese Konvention ist noch nützlicher, wenn es um Event-Handler geht.

Reine berechnete Observablen

berechnete Observable einfach einen Wert basierend auf einigen beobachtbaren Abhängigkeiten berechnet und zurückgibt, ist es besser, sie als ko.pureComputed statt als ko.computed zu deklarieren.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

berechnetes Observable als rein deklariert wird, ändert sein Evaluator andere Objekte oder Zustände nicht direkt, KnockoutJs kann seine Neubewertung und Speichernutzung effizienter verwalten. KnockoutJs wird es automatisch anhalten oder freigeben, wenn kein anderer Code eine aktive Abhängigkeit davon hat.

Writable Computed Observables sind eine Erweiterung von Computed Observables, die die Erstellung von berechneten Observablen ermöglichen, die sowohl durch Lesen als auch Schreiben aktualisiert werden können. Im Gegensatz zu herkömmlichen Berechneten Observablen, die ihren Wert nur auf der Grundlage anderer Observablen berechnen und keinen Wert direkt speichern, können Beschreibbare berechnete Observablen einen Wert speichern und auch eine Funktion zum Aktualisieren dieses Werts bereitstellen wenn nötig.

beschreibbares berechnetes Observable zu erstellen, ist es notwendig, die Funktion ko.computed mit einem Konfigurationsobjekt zu verwenden, das zwei Haupteigenschaften enthält: Lesen und Schreiben. Die Leseeigenschaft enthält die Berechnungsfunktion zur Bestimmung des Werts des Observablen, während die Schreibeigenschaft die Funktion enthält, die aufgerufen wird, wenn Sie den Wert des Observablen aktualisieren möchten.

Das obige ist der detaillierte Inhalt vonWie Observables in KnockoutJs funktionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!