Grundlegendes zu Knockout und zur Verwendung von Knockout zum Binden von context_javascript-Kenntnissen

Knockout-Einführung

Knockout, auch bekannt als ko, ist eine leichtgewichtige Javascript-Klassenbibliothek, die das MVVM-Entwurfsmuster (d. h. Model, View, ViewModel) verwendet, um einfach und elegant bidirektionale Bindung und Echtzeitaktualisierungen zu implementieren und Ihnen so eine saubere Nutzung zu ermöglichen Datenmodell zur Erstellung umfangreicher, reaktionsfähiger Benutzeroberflächen.

Knockout verfügt über drei Kernfunktionen:

1. Elegante Abhängigkeitsverfolgung: Jedes Mal, wenn sich das Datenmodell ändert, wird der entsprechende UI-Teil automatisch aktualisiert

2. Deklarative Bindungen: Verknüpfen Sie einfach die Benutzeroberfläche mit Ihrem Datenmodell, und Sie können eine komplexe dynamische Benutzeroberfläche erstellen

3. Trivial erweiterbar: Es sind nur wenige Codezeilen erforderlich, um ein benutzerdefiniertes Verhalten als deklarative Bindung zu implementieren

Weitere Vorteile:

1. Reiner Javascript-Code;

2. Kann jederzeit zu Ihrer bestehenden Webanwendung hinzugefügt werden

3. Leicht, nur 13 KB nach GZIP

4. Kann in fast allen gängigen Browsern funktionieren ((IE 6, Firefox 2, Chrome, Safari, Edge, andere);

ko verwendet das MVVM-Entwurfsmuster, also die Modellansicht viewModel.

Einfaches Beispiel

So einfach ist das: Sie müssen keinen Code schreiben, um den Textinhalt zu aktualisieren. Er wird automatisch aktualisiert, wenn sich die Array-Länge ändert. Wenn wir die Array-Länge verwenden möchten, um die Verfügbarkeit der Schaltfläche zu steuern, können wir dies auch tun brauche nur:

There are <span data-bind="text: myItems().length"></span> items 

<button data-bind="enable: myItems().length < 5">Add</button>

Im Folgenden wird erläutert, wie Sie Knockout zum Binden von Kontext verwenden

Bindungskontext

Bindungskontext ist ein Objekt, das Daten enthält, auf die Sie in Ihren Bindungen verweisen können. Knockout erstellt und verwaltet automatisch Vererbungsbeziehungen für Bindungskontexte, wenn Bindungen angewendet werden. Der Stamm dieser Hierarchie bezieht sich auf den von Ihnen angegebenen viewModel-Parameter (ko.applyBindings(viewModel)).

Verwenden Sie dann einen Kontrollfluss wie with oder foreach, um jedes Mal einen Bindungskontext für untergeordnete Knoten zu erstellen, um auf die verschachtelten ViewModel-Daten zu verweisen.

$parent

$parents

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

Dies ist ein Array, das alle Ansichtsmodelle des übergeordneten Knotens darstellt

$parent[0]: stellt den übergeordneten Knoten dar;

$parent[1]: stellt den Großelternknoten dar;

$parent[1]: stellt den Urgroßvaterknoten dar;

.....und so weiter

$root

Es handelt sich um das Root-Knoten-Ansichtsmodellobjekt des Root-Kontexts, das im Allgemeinen durch ko.applyBindings angegeben wird und $parents[$parents.length - 1] entspricht.

$component

Wenn Sie sich im Kontext einer bestimmten Komponentenvorlage befinden, gibt $component diese Komponente an, und die angegebene Komponente entspricht $root. Bei verschachtelten Komponenten stellt sie die nächstgelegene Komponente dar.

$data

Es stellt das viewModel-Objekt im aktuellen Kontext dar, $data und $root sind äquivalent. In einem verschachtelten Bindungskontext wird dieser Parameter auf das aktuelle Datenelement gesetzt.

$data ist beispielsweise sehr nützlich, wenn Sie auf das ViewModel selbst und nicht auf die Eigenschaften des ViewModels verweisen möchten.

Es ist der 0-basierte Indexeintrag des Arrays in der foreach-Bindung. Im Gegensatz zu anderen Kontextattributen ist $index beobachtbar, das heißt, es wird aktualisiert, wenn das Array-Element aktualisiert wird.

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

$parentContext

Gibt das Bindungskontextobjekt auf der Ebene des übergeordneten Knotens an. Der Unterschied zu $parent besteht darin, dass es Daten im übergeordneten Knoten und nicht im Bindungskontext angibt.

$rowData

Es ist der Wert des ursprünglichen viewModel im aktuellen Kontext. Wenn das viewModel jedoch durch ko mit observable geändert wird, ist $data nicht beobachtbar und $rowData ist beobachtbar.