Grundlegendes zur Datenbindung in Knockout.js

Datenbindung es ist nichts anderes als die Vereinigung dynamischer Daten, entweder Text oder HTML, in den verschiedenen Teilen des Baums SONNE unseres Dokuments, in dem Knockout.js funktioniert, ermöglicht uns dies, dynamische Inhalte aus Ansichten und Modellen zu generieren.
Dieses Konzept findet sich in einer Vielzahl von Entwicklungsframeworks für JavaScript Da es eine sehr effektive Möglichkeit ist, die Entwicklungslogik auszudrücken, ist es von entscheidender Bedeutung, dass wir verstehen, wie es funktioniert und wie es unser Leben bei der Erstellung unserer Anwendungen erleichtern kann.
AnforderungenDie Hauptanforderung ist, in der Lage zu sein, auszuführen Knockout.js ob wir es heruntergeladen oder von a . eingebunden haben CDN. Wir brauchen auch einen Style-Server Apache um unsere Seite zu bedienen, und einen Texteditor wie Erhabener Text oder NotePad ++, um die Dokumente zu erstellen, die unsere Anwendungen enthalten.
Der beste Weg, um die zu sehen Datenbindung ist mit einem Beispiel, sehen wir uns im folgenden Code an, wie wir ein Dokument erstellt haben HTML wo wir einschließen Knockout.js, dann haben wir in unserem Körper ein Etikett geschaffen H1 darin machen wir a Datenbindung von HTML, das bedeutet, dass es auf HTML-Code wartet.
In dem Teil JavaScript Was wir einfach gemacht haben, war ein Ansichtsmodell und darin einige Attribute definieren, um damit arbeiten zu können. Das Interessante ist, dass wir dadurch die Daten von unserem Ansichtsmodell zu einem Teil des HTML. Sehen wir uns an, wie unser Code aussieht:

 Datenbindung in Knockout.js 

Beim Aufruf unseres Dokuments aus unserem Browser erhalten wir folgendes Ergebnis:

Hier sehen wir, wie wir eine Methode gebaut haben, die den Namen und ein bisschen zurückgibt HTML Um ihm Stil zu verleihen, bedeutet dies, dass wir eine unendliche Palette von Möglichkeiten haben, aber vielleicht sticht am meisten heraus, dass wir a Datenbindung zu fast jedem Artikel. So können wir Text, HTML usw.
Aber nicht nur, was es uns ermöglicht, dem Benutzer Text zu drucken, wir können auch CSS, Klassen und Attribute in unsere Etiketten integrieren HTML, sodass wir fast jeden Aspekt unserer Seite steuern können, ohne statische Werte festlegen zu müssen.
Sehen wir uns im folgenden Beispiel an, wie wir einem Label eine spezielle Klasse zuweisen HTML, ist die Idee, dass wir dynamische Stile generieren können, ohne eingreifen zu müssen, wenn wir eine Anwendung haben, die eine Schriftart sucht SICH AUSRUHEN, aber in diesem Fall werden wir zur Vereinfachung nur eine Komponente dynamisch laden:

 Datenbindung in Knockout.js 
 

Wir bemerken dann, wie wir eine Komponente übergeben können Stil die das Aussehen des Textes definiert, wir könnten auch eine Klasse hinzufügen und schließlich rufen wir unseren Text aus dem Modell auf, wir bemerken auch, dass wir dies alles auf die gleiche Weise tun Datenbindung, Trennen Sie die verschiedenen Elemente nur durch Kommas.
Wenn wir unser neues Beispiel ausführen, sieht das Ergebnis in unserem Browser wie folgt aus:

VERGRÖSSERN

Achten wir besonders auf den Teil von Debugger von HTML des Browsers, hier sehen wir, wo die Elemente der Datenbindung sie wurden effektiv auf das Etikett übertragen.
Es gibt andere Funktionen, die wir mit dem verwenden können Datenbindung, eine davon sind die Bedingungen, d. h. wir können das eine oder andere Element innerhalb unserer Labels platzieren HTML unter Berücksichtigung der unterschiedlichen Eigenschaften unseres Modells. Sehen wir uns den folgenden Code an, in dem wir ein Beispiel für diesen Stil verwenden:

 Bedingte Datenbindung 
 

In unserer Modellansicht haben wir ein Attribut namens id definiert, das wir auf 0 setzen, dann in unserer HTML im Abschnitt von Datenbindung Wir haben einen ternären Operator definiert, bei dem wir angeben, wenn die ID der Modellansicht 0 ist, druckt sie 'Hallo', andernfalls druckt sie 'Auf Wiedersehen'.
Lassen Sie uns das Beispiel im Browser ausführen, um das Ergebnis anzuzeigen:

Eine interessante Übung wäre, wenn Sie die ID in einen anderen Wert ändern können, um den Vorgang zu bestätigen, deshalb belassen wir es als Aufgabe.
Etwas sehr Wichtiges, das wir berücksichtigen müssen, ist der Kontext unserer Elemente, denn Knockout.js verwendet eine hierarchische Struktur von Vater Sohn um die verschiedenen Eigenschaften zu handhaben, die wir aus den Modellansichten erhalten.
Das heißt, wir arbeiten immer auf der Basis eines Elternteils, können also auf dessen Eigenschaften zugreifen und so Eigenschaften des Kindes erzeugen, die sich von anderen Kindern auf gleicher Ebene unterscheiden und somit unterschiedliche Werte einbeziehen können.
Da alles relativ zum Kontext ist, sehen wir, dass wir in den vorherigen Beispielen die Datenbindungstext ohne dass Sie angeben müssen, wem es gehört, denn wenn dies geschieht, Knockout.js es übernimmt sofort den Kontext des aktuellen Kindes. Sehen wir uns im Folgenden die verschiedenen Arten von Kontext an, die wir in unserer Anwendung verarbeiten können:
$ rootEs ist der Hauptkontext, aus dem sich unsere Modellansicht ableitet, wenn sie von irgendeinem Teil unserer Anwendung aufgerufen wird, sucht sie immer nach der hierarchischsten Beziehung mit der höchsten Priorität in unserer Struktur, sie ist besonders, wenn wir viele Kinder haben und wir wollen etwas von den älteren Eltern.
$ ElternteilEs funktioniert ähnlich wie $ root, mit dem Unterschied, dass es sich nur auf den unmittelbaren Elternteil unseres Elements bezieht, daher ist sein Geltungsbereich darauf beschränkt, es wird häufig verwendet, wenn wir mit Zyklen arbeiten für jedes viele Kinder zu zeugen.
$ ElternDas Hinzufügen des Plurals zu diesem Kontext sagt uns, dass wir eine Art Anordnung oder Array erstellen, die einen Index für jeden der Eltern des Kindes enthält, von wo aus wir es nennen, wie folgt $ Eltern [0] ist der unmittelbare Vater, $ Eltern [1] ist der Elternteil des unmittelbaren Elternteils und so weiter.
$ DatenEs ermöglicht uns den Zugriff auf die Daten des Kontexts, in dem wir positioniert sind. Es wird im Allgemeinen verwendet, wenn wir mit variablen Inhalten arbeiten und auf unsere Modellansichtseigenschaften zugreifen müssen.
$-IndexEs ist nur zugänglich, wenn wir mit Schleifen arbeiten für jedes und es ermöglicht uns, auf die verschiedenen Positionen unseres Elements zuzugreifen.
Wenn wir über eine Reihe von Elementen iterieren müssen, ist es der Moment, in dem wir die Schleife verwenden müssen für jedes, dies durchläuft ein Array oder eine Liste von Elementen und auf diese Weise können wir unsere Liste im Dokument erstellen HTML.
Im folgenden Beispiel haben wir eine Eigenschaft namens books in unserer Modellansicht und durchlaufen sie dann mit a für jedes in diesem Fall eine der Kontextvariablen verwenden $ Daten, mal sehen:

 Datenbindung foreach

Wenn wir das Ergebnis des Browsers sehen, werden wir die Operation bemerken, die auftritt, wenn alle Konzepte berücksichtigt werden, die wir während des Tutorials gelernt haben.

Damit beenden wir dieses Tutorial, wir haben gelernt und hatten einen tieferen Kontakt mit Knockout.js, ist es wichtig, die Konzepte dessen, was das ist, sehr tief und solide zu verstehen Datenbindung, verwenden wir bereits die Daten, Attribute und Eigenschaften unserer Modellansichten. Wir konnten auch ein sehr wichtiges Konzept wie den Kontext verstehen, jetzt können wir verstehen, wie sich die verschiedenen Elemente unterscheiden und warum Knockout.js Es weiß, wann einige Daten über andere übertragen werden müssen, und das liegt daran, dass es immer den Kontext unserer Elemente kennt.