Arbeiten mit Formularen in Knockout.js

Formulare sind ein integraler Bestandteil jeder Anwendung oder Webseite, da sie eines der Mittel sind, mit denen wir Benutzerdaten nativ erhalten können. Dies macht ihre Verarbeitung zu einer sehr häufigen Aufgabe.
Knockout.js ermöglicht uns, mit Ihrem Objekt zu arbeiten Datenbindung alle Elemente, aus denen ein Formular bestehen kann, wodurch die Möglichkeit besteht, zu validieren, Ereignisse auszulösen, Observablen zuzuweisen usw. Dies macht die clientseitige Formularverarbeitung praktikabel, und daher fügen wir eine zusätzliche Validierungsebene hinzu, bevor sie die Serverseite erreicht.
AnforderungenWir müssen nur haben Knockout.js in unserem System und zugänglich für die Anwendungen, die wir erstellen werden, Berechtigungen zum Schreiben von Dateien, eine Internetverbindung zum Abrufen der Bibliotheken, wenn wir sie nicht haben, und einen Texteditor wie Erhabener Text oder Notizblock ++. Zum Ausführen der Anwendungen benötigen wir einen Webservertyp Apache oder Nginx in unserer Testumgebung.
Bevor wir zu Beispielen mit Fällen übergehen, die wir anwenden können, ist es sehr wichtig, die Datenbindungen die mit den Elementen des Formulars unserer Bewerbung arbeiten können, auf diese Weise können wir eine Vorstellung davon bekommen, was wir erreichen können und was nicht, insbesondere wie wir die Ergebnisse erzielen können, die wir benötigen, damit unsere Bewerbung richtig funktioniert:
DatenbindungswertDies wird in den Werten oder Auswahleingabeelementen verwendet. Dies können die Eingabe-, Textbereichs- oder Auswahlelemente sein. Damit können wir den Wert des Elements zu dem Zeitpunkt erfassen, zu dem wir es verwenden müssen.
Datenbindung textInputOst Bindung wird mit den Elementen input und textarea verwendet, seine Funktion ist ähnlich wie Wert Wenn wir ihm jedoch ein Observable zuweisen, können wir die Werte erfassen, während der Benutzer mit dem Element interagiert, im Gegensatz zu einem Wert, der uns den Wert angibt, wenn sich das Element ändert, beispielsweise wenn es den Fokus verliert.
Datenbindung geprüftEs wird mit Elementen des Typs . verwendet Kontrollkästchen Ja Radio KnöpfeWie der Name schon sagt, ermöglicht es uns festzustellen oder zu wissen, ob ein Element in einer Struktur ausgewählt ist, die die genannten Elemente verwendet.
DatenbindungsoptionenIndem Sie dies verwenden Bindung Wir können ein ausgewähltes Element mit den Optionen füllen, die es im Formular anzeigt, es ist perfekt, wenn wir einen Katalog von Optionen dynamisch erstellen möchten.
Data-bind selectedOptionsEbenfalls exklusiv für das select-Element wird es verwendet, wenn wir die ausgewählten Optionen beim Festlegen der Eigenschaft festlegen müssen multi, da wir mehr als eine Option gleichzeitig auswählen müssenz.
Datenbindung aktivieren / deaktivierenEs ermöglicht uns, jedes der verschiedenen Elemente des Formulars zu aktivieren oder zu deaktivieren. Damit können wir ein Element entfernen, wenn es unter bestimmten Bedingungen nicht im Anwendungsablauf verwendet werden muss ermöglichen dient der Ermöglichung und deaktivieren deaktivieren, falls wir die Bedeutung jedes Wortes nicht kennen.
Die interessantesten davon Datenbindungen ist, dass sie auf zwei Arten funktionieren, d. h. wenn sich ein Element ändert, können wir es in unserer Modellansicht empfangen und bei Bedarf verarbeiten, aber auch, wenn wir ein Observable haben und etwas aus der Anwendung heraus tun möchten zum Formular können wir auch ohne Probleme, solange wir die Datenbindung passend für die Art des Formelementes, da Knockout.js Es werden keine fehlerhaften Anweisungen interpretiert, wie dies ein Browser mit Code tun könnte HTML.
Sehen wir uns nun ein praktisches Beispiel an, wie wir alle Konzepte verwenden können, über die wir im vorherigen Abschnitt dieses Tutorials gesprochen haben. Wir erstellen ein Element vom Typ Textbereich dass es nur 140 Zeichen akzeptiert, da diese Einschränkung besteht, müssen wir dem Benutzer mitteilen, wie viele Zeichen er beim Schreiben noch übrig hat.
Die Logik, die wir verwenden werden, ist sehr einfach, wir werden die data-bind textInput im textarea-Element unseres Formulars, dann legen wir es in unserer Modellansicht als Observable fest, und so können wir dann mit der Erfassung der Zeichen beginnen, während der Benutzer tippt. Schließlich verwenden wir ein Element berechnet Um ein zusammengesetztes Observable mit der Summe der verbleibenden Zeichen zu erstellen, werden wir den Benutzer im Moment nicht zwingen, weniger zu schreiben, wir informieren ihn nur über die Zeichen. Schauen wir uns den Code für unser Beispiel an:

 Formulare in Knockout.js
Geben Sie einen Text ein

Verbleibende Zeichen: 

Es ist zu beachten, dass wir die Datenbindungswert weil wir die Änderung der Anzahl der verbleibenden Zeichen zum Zeitpunkt der Eingabe durch den Benutzer benötigen, da wir andernfalls nur die Menge zum Zeitpunkt der Übergabe an ein anderes Element angeben könnten, und dies wäre nicht optimal für das, was wir bei der Verwendung anstreben Knockout.jsEs wird jedoch Fälle geben, in denen diese Art von Verhalten erforderlich ist, es hängt alles davon ab, was unsere Anwendung benötigt. Sehen wir uns also an, wie unser Beispiel aussieht, wenn wir es im Browser ausführen:

Natürlich können wir hier nicht dynamisch sehen, wie unser Zähler sinkt, aber wenn wir unseren Zähler der verbleibenden Zeichen schreiben, wird er aktualisiert, wie er in das Textarea-Element des Formulars geschrieben wird:

Ein weiterer Aspekt, den wir bei der Arbeit mit Formularen häufig in unseren Anwendungen benötigen, sind Events, da wir mit ihnen Aktionen auslösen können, wenn der Benutzer etwas Bestimmtes tut, wie zum Beispiel einen Klick oder die Maus über einen bestimmten Bereich unseres HTML. Sehen wir uns einige der Ereignisse an, die wir in unseren Formularen verwenden können:
Veranstaltung einreichenDieses Ereignis kann nur im Element verwendet werden Form, und es wird nur dann aktiviert, wenn der Benutzer das Formular an den Server sendet, entweder durch eine Eingabe senden oder mit einer anderen Methode.
Klick-EreignisDieses Ereignis ist ein alter Bekannter, da der Name schon sagt, dass es aktiviert wird, wenn Sie in unserer Anwendung auf ein Element klicken.
HasFocus-VeranstaltungDieses Ereignis wird ausgelöst, wenn ein Element allgemein input, textarea oder select vom Benutzer ausgewählt wird und in diesem Moment aktiv ist.
Es besteht auch die Möglichkeit, andere Veranstaltungen zu nutzen, die im SONNE zum Beispiel Mouseover, Tastendruck um die Funktionalität unserer Modellansicht auf diese Ebenen zu erweitern.
In der folgenden Übung werden wir das erworbene Wissen über Ereignisse anwenden, ein kleines Formular erstellen, in dem wir eine Liste haben, und jedes Mal, wenn wir mit der Maus über eine Option fahren, wird ein Bild angezeigt angezeigt wird, ist dies natürlich eine demonstrative Implementierung und es ist nicht für die Produktion geeignet, aber es hilft uns zu verstehen, woran wir gearbeitet haben.
In diesem Fall benötigen wir zusätzlich Knockout.js die Bibliothek von jQuery Um einige Effekte in unserer Anwendung zu verwenden, ist es ideal, sie herunterzuladen und in demselben Ordner oder Verzeichnis zu speichern, in dem wir sie haben Knockout.js, oder verwenden Sie es vielleicht von Ihrem CDN offiziell. Sehen wir uns dann den Code an, den wir brauchen:

 Formulare in Knockout.js

Hier haben wir einfach eine Liste von Dingen mit einer Beschreibung und einem Bild erstellt. Dieses Bild kann von der Anwendung überall zugänglich sein, in diesem Fall haben wir sein Stammverzeichnis gewählt, dann erstellen wir eine Funktion, die das Bild zu a hinzufügt Selektor mit jQuery damit wir das gleiche im zeigen können SONNE.
Im Teil von HTML wir sehen, dass wir eine Liste mit den zur Liste gehörenden Elementen erstellt haben Zeug und schließlich geben wir an, dass das Ereignis Mouseover und die Funktion, die ausgeführt werden soll, wenn dieses Ereignis eintritt. Sehen wir uns an, wie unsere Anwendung aussieht, wenn wir sie in unserem Browser ausführen:

Wenn wir dann den Mauszeiger auf einige der Texte bewegen, wird das entsprechende Bild geladen und wir können die Funktionalität unseres Beispiels sehen:

Da es sich um eine dynamische Änderung handelt, können wir die Änderung natürlich nicht einschätzen, aber wenn wir den Cursor auf das obere Element bewegen, ändert sich das Bild. Damit haben wir dieses Tutorial abgeschlossen, mit dem wir uns mit der Arbeit von Formularen beschäftigt haben Knockout.js, wodurch wir Tools zur Verbesserung der Erfassung und Validierung der von unseren Benutzern stammenden Daten erhalten.