Accentsconagua

Interaktive Bindungen

Code
Share

Formularelemente sind die herkömmliche Art, mit Benutzern über eine Webseite zu interagieren. Das Arbeiten mit Formularen in Knockout.js entspricht weitgehend dem Arbeiten mit Aussehensbindungen. Da Benutzer Formularfelder bearbeiten können, verwaltet Knockout.js Aktualisierungen in beide Richtungen. Dies bedeutet, dass interaktive Bindungen sind zwei wege. Sie können programmgesteuert festgelegt werden und die Ansicht wird entsprechend aktualisiert, oder Sie können von der Ansicht festgelegt und programmgesteuert gelesen werden.

Abbildung 19: Knockout.js verbreitet sich in beide Richtungen

Sie können beispielsweise den Wert eines Texteingabefelds über das ViewModel festlegen und es wird in der Ansicht angezeigt. Wenn der Benutzer etwas in das Eingabefeld eingibt, wird die zugehörige Eigenschaft des ViewModel ebenfalls aktualisiert. Der Punkt ist, Knockout.js sorgt immer dafür, dass die Ansicht und das ViewModel synchronisiert werden.

Knockout.js enthält 11 Bindungen für die Interaktion mit dem Benutzer:

  • klicken: -Rufen Sie eine ViewModel-Methode auf, wenn Sie auf das Element klicken.
  • Wert: -Verknüpfen Sie den Wert eines Formularelements mit einer ViewModel-Eigenschaft.
  • Veranstaltung: -Rufen Sie eine Methode auf, wenn ein vom Benutzer initiiertes Ereignis auftritt.
  • einreichen: -Rufen Sie eine Methode auf, wenn ein Formular gesendet wird.
  • aktivieren: -Aktivieren Sie ein Formularelement basierend auf einer bestimmten Bedingung.
  • deaktivieren: -Deaktivieren Sie ein Formularelement basierend auf einer bestimmten Bedingung.
  • geprüft: -Verknüpfen Sie ein Optionsfeld oder ein Kontrollkästchen mit einer ViewModel-Eigenschaft.
  • Optionen: -A definieren Feld.
  • hasfocus: -Definieren Sie, ob das Element fokussiert ist oder nicht.

    • Wie die Erscheinungsbindungen, die in der vorherigen Lektion vorgestellt wurden, werden diese alle im data-bind-Attribut eines HTML-Elements definiert. Einige von ihnen (wie die klicken bindung) kann an jedem Element arbeiten, andere (wie markiert) können jedoch nur mit bestimmten Elementen verwendet werden.

    Einer der größten Vorteile der Verwendung von Knockout.js zur Verwaltung von HTML-Formularen ist, dass Sie immer noch müssen sich nur um die Daten sorgen. Immer wenn der Benutzer den Wert eines Formularelements ändert, wird das Update in ViewModel automatisch angezeigt. Dadurch ist es sehr einfach, Benutzereingaben in den Rest Ihrer Anwendung zu integrieren.

    Ein HTML-Formular

    In dieser Lektion wird für das laufende Beispiel eine neue HTML-Seite verwendet. Anstelle einer Warenkorb-Anzeigeseite arbeiten wir mit einem Anmeldeformular für Neukunden. Erstellen Sie eine neue HTML-Datei mit dem Namen interactive-bindings.html und füge folgendes hinzu:

       Interaktive Bindungen

    Dies ist eine vereinfachte Version dessen, woran wir in der gesamten Serie gearbeitet haben. In dieser Lektion machen wir uns nur Sorgen konfigurieren Formularelemente. Die Bearbeitung von Formularsendungen bleibt für die nächste Lektion erhalten.

    Das klicken Bindung

    Die Klickbindung ist eine der einfachsten interaktiven Bindungen. Es ruft einfach eine Methode Ihres ViewModel auf, wenn der Benutzer auf das Element klickt. Fügen Sie beispielsweise die folgende Schaltfläche in der hinzu

    Element:

    Wenn der Benutzer auf die Schaltfläche klickt, ruft Knockout.js die saveUserData () Methode auf PersonViewModel. Außerdem werden zwei Parameter an die Handler-Methode übergeben: das aktuelle Modell und das DOM-Ereignis. Eine saveUserData () -Methode, die beide dieser Parameter verwendet, würde ungefähr so ​​aussehen:

     this.saveUserData = Funktion (Modell, Ereignis) alert (model.firstName () + "versucht zu überprüfen!"); if (event.ctrlKey) alert ("Er hat die Steuertaste aus irgendeinem Grund gedrückt gehalten."); ;

    In diesem speziellen Beispiel, Modell- bezieht sich auf die ViewModel-Instanz der obersten Ebene und Veranstaltung ist das DOM-Ereignis, das durch Klicken des Benutzers ausgelöst wird. Das Modellargument ist immer das aktuell ViewModel, das den Zugriff auf einzelne Listenelemente in einer foreach-Schleife ermöglicht. So haben wir die removeProduct () -Methode in Lektion 3 implementiert:.

    Das Wert Bindung

    Die Wertebindung ist der Textbindung, die wir in dieser Serie verwendet haben, sehr ähnlich. Der Hauptunterschied ist, dass es durch die geändert werden kann Nutzer, und das ViewModel wird entsprechend aktualisiert. Zum Beispiel können wir das verknüpfen Vorname und Nachname Observables mit einem Eingabefeld durch Hinzufügen des folgenden HTML - Formulars (vor dem

    Die Handler-Methoden sollten in etwa wie folgt aussehen:

     this.displayName = function () alert (this.firstName ()); ; this.setName = function () this.firstName ("Bob"); ;

    Klicken Sie auf Anzeigename wird das ViewModel lesen Vorname Eigenschaft, die dem entsprechen sollte Element, auch wenn es vom Benutzer bearbeitet wurde. Das Name einsetzen Die Schaltfläche legt den Wert der ViewModel-Eigenschaft fest zu aktualisierendes Element. Das Verhalten des letzteren ist im Wesentlichen dasselbe wie bei einer normalen Textbindung.

    Der entscheidende Punkt hinter dieser Zwei-Wege-Synchronisation ist, dass Sie sich auf Ihre Daten konzentrieren können. Nachdem Sie ein eingerichtet haben Wert bindend können Sie HTML-Formularelemente vollständig vergessen. Rufen Sie einfach die zugehörige Eigenschaft für das ViewModel ab, und Knockout.js kümmert sich um den Rest.

    Wir werden das nicht brauchen Anzeigename und setName-Methoden oder die entsprechenden Schaltflächen, sodass Sie sie löschen können, wenn Sie möchten.

    Das Veranstaltung Bindung

    Das Veranstaltung Mit der Bindung können Sie auf beliebige HTML-Elemente auf beliebige DOM-Ereignisse warten. Es ist wie eine generische Version von klicken Bindung. Da es auf mehrere Ereignisse warten kann, muss ein Objekt Ereignisse zu Methoden zuordnen (dies ähnelt dem Parameter der attr-Bindung). Zum Beispiel können wir beim ersten Ereignis auf Mouseover- und Mouseout-Ereignisse warten Element mit dem folgenden:

     
     Vorname:

    Wenn der Benutzer auslöst Mouseover Ereignis, ruft Knockout.js die zeige Details() Methode unseres ViewModels. Ebenso wird hideDetails () aufgerufen, wenn er das Element verlässt. Beide haben die gleichen Parameter wie die Handler der Klickbindung: das Ziel des Ereignisses und das Ereignisobjekt selbst. Lassen Sie uns diese Methoden jetzt implementieren:

     this.showDetails = function (target, event) alert ("Maus über"); ; this.hideDetails = function (Ziel, Ereignis) alert ("Mouse out"); ;

    Nun, wenn Sie mit dem interagieren Vorname In diesem Feld sollten beide Meldungen angezeigt werden. Statt nur eine Warnmeldung anzuzeigen, zeigen wir für jedes Formularfeld zusätzliche Informationen an, wenn der Benutzer über das Feld fährt. Dafür brauchen wir eine weitere Beobachtungsmöglichkeit PersonViewModel:

     this.details = ko.observable (false);

    Das Einzelheiten property fungiert als Toggle, den wir mit unseren Event-Handler-Methoden ein- und ausschalten können:

     this.showDetails = Funktion (Ziel, Ereignis) this.details (true); ; this.hideDetails = Funktion (Ziel, Ereignis) this.details (false); ;

    Dann können wir den Toggle mit dem kombinieren sichtbar Bindung zum Anzeigen oder Ausblenden von Formularfelddetails in der Ansicht:

     
     Vorname:  Dein Vorname

    Der Inhalt der sollte erscheinen, wenn Sie mit der Maus über Vorname Feld und verschwinden, wenn Sie mit der Maus herausfahren. Dies ist ziemlich nahe an unserer gewünschten Funktionalität, aber es wird komplizierter, wenn wir Details für mehr als ein Formularfeld anzeigen möchten. Da wir nur eine Toggle-Variable haben, ist das Anzeigen von Details ein Alles-oder-Nichts-Vorschlag. Entweder werden Details angezeigt alles der Felder oder für keines von ihnen.

    Abbildung 21: Alle Formularfelddetails gleichzeitig umschalten

    Sie können dies beheben, indem Sie einen benutzerdefinierten Parameter an die Handlerfunktion übergeben.

    Ereignishandler mit benutzerdefinierten Parametern

    Es ist möglich, benutzerdefinierte Parameter aus der Ansicht an den Ereignishandler zu übergeben. Das heißt, Sie können auf beliebige Informationen aus der Ansicht in das ViewModel zugreifen. In unserem Fall verwenden wir einen benutzerdefinierten Parameter, um zu ermitteln, in welchem ​​Formularfeld die Details angezeigt werden sollen. Anstelle eines Umschalters wird der Einzelheiten observable enthält einen String, der das ausgewählte Element darstellt. Zunächst nehmen wir einige geringfügige Änderungen am ViewModel vor:

     this.details = ko.observable (""); this.showDetails = Funktion (Ziel, Ereignis, Details) this.details (Details);  this.hideDetails = Funktion (Ziel, Ereignis) this.details ("");

    Die einzige große Änderung hier ist der Zusatz von a Einzelheiten Parameter an die zeige Details() Methode. Wir benötigen keinen benutzerdefinierten Parameter für die hideDetails () - Funktion, da nur die beobachtbaren Details gelöscht werden.

    Als Nächstes verwenden wir ein Funktionsliteral in der Veranstaltung Bindung, um den benutzerdefinierten Parameter an showDetails () zu übergeben:

    Das Funktionsliteral für Mouseover ist eine Hülle für unsere zeige Details() Handler, der eine einfache Möglichkeit bietet, zusätzliche Informationen zu übergeben. Der Mouseout-Handler bleibt unverändert. Schließlich müssen wir das aktualisieren mit den Details:

     Dein Vorname

    Das Vorname Das Formularfeld sollte seine detaillierte Beschreibung anzeigen, wenn Sie den Mauszeiger darüber bewegen, und ausblenden, wenn Sie den Mauszeiger verlassen, genau wie im vorherigen Abschnitt. Erst jetzt können Sie mehr als einem Feld Details hinzufügen, indem Sie den benutzerdefinierten Parameter ändern. Zum Beispiel können Sie Details für die aktivieren Nachname Eingabeelement mit:

     
     Nachname:  Dein Familienname

    Event-Bindings können in der Einrichtung etwas kompliziert sein. Sobald Sie jedoch wissen, wie sie funktionieren, bieten sie unbegrenzte Möglichkeiten für reaktives Design. Das Veranstaltung Die Bindung kann sich sogar mit der Animationsfunktionalität von jQuery verbinden, die in Lektion 8: behandelt wird. Für den Moment erkunden wir den Rest der interaktiven Bindungen von Knockout.js. Glücklicherweise ist keiner von ihnen fast so kompliziert wie Ereignisbindungen.

    Das aktivieren deaktivieren Bindungen

    Das aktivieren und deaktivieren Bindungen können verwendet werden, um Formularfelder basierend auf bestimmten Bedingungen zu aktivieren oder zu deaktivieren. Angenommen, Sie wollten für jeden Benutzer eine primäre und eine sekundäre Telefonnummer aufzeichnen. Diese können als normale Observables auf PersonViewModel gespeichert werden:

     this.primaryPhone = ko.observable (""); this.secondaryPhone = ko.observable ("");

    Das primaryPhone-Observable kann mit einem Normalfeld mit einem Formularfeld verknüpft werden Wert Bindung:

     
     Haupttelefon:

    Es macht jedoch keinen Sinn, eine sekundäre Telefonnummer einzugeben, ohne eine primäre anzugeben. Daher aktivieren wir die für die sekundäre Telefonnummer nur, wenn primaryPhone nicht leer ist:

     
     Sekundäres Telefon:

    Jetzt können Benutzer nur noch mit dem interagieren Sekundäres Telefon Feld, wenn sie einen Wert für eingegeben haben primaryPhone. Das deaktivieren Die Bindung ist eine bequeme Möglichkeit, die Bedingung zu negieren, funktioniert aber ansonsten genauso wie das Aktivieren.

    Das geprüft Bindung

    geprüft ist eine vielseitige Bindung, die je nach Verwendung unterschiedliche Verhaltensweisen aufweist. Im Allgemeinen wird die aktivierte Bindung verwendet, um die überprüfbaren Formularelemente von HTML-Elementen zu aktivieren bzw. deaktivieren: Kontrollkästchen und Optionsfelder.

    Einfache Kontrollkästchen

    Beginnen wir mit einem einfachen Kontrollkästchen:

     
    Ärgere mich mit speziellen Angeboten:

    Dadurch wird unserem Formular ein Kontrollkästchen hinzugefügt und es mit dem Formular verknüpft Nerv mich Eigenschaft des ViewModel. Wie immer ist dies eine bidirektionale Verbindung. Wenn der Benutzer das Feld auswählt oder die Markierung aufhebt, aktualisiert Knockout.js das ViewModel. Wenn Sie den Wert der ViewModel-Eigenschaft festlegen, wird die Ansicht aktualisiert. Vergessen Sie nicht, die ärgerliche Beobachtung zu definieren:

     this.annoyMe = ko.observable (true);

    Verwendung der geprüft Das Binden auf diese Art ist wie das Erstellen einer Eins-zu-Eins-Beziehung zwischen einem einzelnen Kontrollkästchen und einem beobachtbaren Booleschen Objekt.

    Abbildung 22: Boolesches Observable mit einem einzigen Kontrollkästchen verbinden

    Kontrollkästchen Arrays

    Es ist auch möglich, die geprüft Bindung mit Arrays. Wenn Sie ein Kontrollkästchen an ein beobachtbares Array binden, entsprechen die ausgewählten Boxen den im Array enthaltenen Elementen, wie in der folgenden Abbildung dargestellt:

    Abbildung 23: Ein beobachtbares Array mit mehreren Kontrollkästchen verbinden

    Betrachten Sie zum Beispiel Folgendes:

    this.annoyTimes = ko.observableArray (['Morgen', 'Abend']);

    Wir können die Elemente in diesem beobachtbaren Array mit den Kontrollkästchen verbinden Wert Attribut auf jedem Element:

     
    Ärgere mich mit speziellen Angeboten:

    Dies verwendet die Nerv mich Eine Eigenschaft aus der vorherigen Lektion, um eine Liste von Kontrollkästchen umzuschalten, aus denen Sie auswählen können, wann es ein guter Zeitpunkt ist, um gestört zu werden. Schon seit Wert = "Morgen" Ist das erste Kontrollkästchen aktiviert, wird es jedes Mal aktiviert "Morgen" Zeichenfolge ist im Array "annoyTimes". Dasselbe gilt für die anderen Kontrollkästchen. "Morgen" und "Abend" sind der anfängliche Inhalt des Arrays, daher sollten Sie etwa Folgendes auf Ihrer Webseite sehen:

    Abbildung 24: Kontrollkästchen, die den Anfangsstatus des anzeigen nervige Zeiten beobachtbares Array

    Und da benutzen wir eine beobachtbar Array ist die Verbindung in beide Richtungen. Wenn Sie die Auswahl aufheben, wird die entsprechende Zeichenfolge aus dem Feld entfernt nervige Zeiten Array.

    Radio Knöpfe

    Der letzte Kontext für die geprüft Bindung ist in einer Optionsfeldgruppe. Anstelle eines booleschen Arrays oder eines Arrays verbinden Optionsfelder ihre Wert Attribut für eine Zeichenfolge-Eigenschaft im ViewModel. Zum Beispiel können wir unser Kontrollkästchen-Array in eine Optionsfeldgruppe umwandeln, indem wir zuerst die beobachtbare AnnoyTimes in eine Zeichenfolge ändern:

     this.annoyTimes = ko.observable ('Morgen');

    Dann müssen wir nur noch drehen Elemente in Optionsfelder:

    Jeder sollte haben "Radio" als Typ und "AnnoyGroup" als Name. Letzteres hat nichts mit Knockout.js zu tun - es fügt einfach alle derselben HTML-Optionsfeldgruppe hinzu. Das Wertattribut des ausgewählten Optionsfelds wird jetzt immer in der Eigenschaft annoyTimes gespeichert.

    Abbildung 25: Eine beobachtbare Zeichenfolge mit mehreren Optionsfeldern verbinden

    Das Optionen Bindung

    Das Optionen Bindung definiert den Inhalt von a Feld mit:

    Sie sollten jetzt eine Dropdown-Liste anstelle einer Optionsfeldgruppe haben, aber es ist sinnlos, eine solche Liste zu haben, wenn Sie nicht herausfinden können, welches Element ausgewählt ist. Dafür können wir das wieder verwenden Wert verbindlich von früher in der Lektion:

    Dadurch wird festgelegt, welche Eigenschaft im ViewModel die ausgewählte Zeichenfolge enthält. Wir müssen diese Eigenschaft noch definieren:

     this.selectedTime = ko.observable ('Am Nachmittag');

    Wieder geht diese Beziehung in beide Richtungen. Wert von einstellen selectedTime ändert das ausgewählte Element in der Dropdown-Liste und umgekehrt.

    Objekte als Optionen verwenden

    Durch die Kombination der Optionen und der Wertebindungen erhalten Sie alle Werkzeuge, die Sie zum Arbeiten mit Dropdown-Listen benötigen, die Zeichenfolgen enthalten. Es ist jedoch oft viel praktischer, ganze JavaScript-Objekte mithilfe einer Dropdown-Liste auszuwählen. Im Folgenden wird beispielsweise eine Liste von Produkten definiert, die an die vorherige Lektion erinnern:

     this.products = ko.observableArray ([Name: 'Bier', Preis: 10,99, Name: 'Gören', Preis: 7,99, Name: 'Brötchen', Preis: 2,99]);

    Wenn Sie versuchen, eine Element:

    Damit dieses Snippet funktioniert, müssen Sie auch ein definieren favoriteProduct beobachtbar auf Ihrem ViewModel. Knockout.js füllt diese Eigenschaft mit einem Objekt von PersonViewModel.products - keine Zeichenfolge wie im vorherigen Abschnitt.

    Das selectedOptions Bindung

    Die andere Darstellungsmöglichkeit für HTML's

    Das Größe Attribut definiert die Anzahl der sichtbaren Optionen und multiple = 'true' verwandelt es in eine Mehrfachauswahlliste. FavoriteProducts sollte anstelle einer Zeichenfolge auf ein Array zeigen:

     var brats = name: 'brats', preis: 7.99; this.products = ko.observableArray ([Name: 'Bier', Preis: 10,99, Gören, Name: 'Brötchen', Preis: 2,99]); this.favoriteProducts = ko.observableArray ([Gören]);

    Beachten Sie, dass wir dieselbe Objektreferenz angeben mussten (Gören) an beide Produkte und favoriteProducts für Knockout.js, um die Auswahl korrekt zu initialisieren.

    Das hasfocus Bindung

    Und so kommen wir zu unserer abschließenden interaktiven Bindung: hasfocus. Mit dieser passend benannten Bindung können Sie den Fokus eines interaktiven Elements mithilfe einer ViewModel-Eigenschaft manuell festlegen. Wenn Sie aus irgendeinem merkwürdigen Grund möchten, dass das Feld "Primärtelefon" der ursprüngliche Fokus ist, können Sie eine hasfocus-Bindung hinzufügen, z.

     
     Haupttelefon:

    Dann können Sie ein boolesches Observable hinzufügen, um Knockout.js mitzuteilen, dass es den Fokus erhält:

     this.phoneHasFocus = ko.observable (true);

    Durch das Festlegen dieser Eigenschaft an anderer Stelle in Ihrer Anwendung können Sie den Fokusfluss in Ihren Formularen genau steuern. Darüber hinaus können Sie verwenden hasfocus um den Fortschritt des Benutzers durch mehrere Formularfelder zu verfolgen.

    Zusammenfassung

    In dieser Lektion wurden interaktive Bindungen behandelt, die die automatische Abhängigkeitsverfolgung von Knockout.js gegenüber den Formularfeldern von HTML nutzen. Im Gegensatz zu Aussehensbindungen sind interaktive Bindungen zwei wege Bindungsänderungen an den Benutzerschnittstellenkomponenten werden automatisch im ViewModel wiedergegeben, und Zuweisungen an ViewModel-Eigenschaften lösen Knockout.js aus, um die Ansicht entsprechend zu aktualisieren.

    Interaktive Bindungen, Erscheinungsbindungen und Kontrollflussbindungen bilden das Vorlagen-Toolkit von Knockout.js. Ihr gemeinsames Ziel ist es, eine datenzentrierte Schnittstelle für Ihre Webanwendungen bereitzustellen. Wenn Sie die Darstellung Ihrer Daten mithilfe dieser Bindungen definiert haben, müssen Sie sich nur noch um das darunter liegende ViewModel kümmern. Dies ist eine wesentlich robustere Methode zur Entwicklung dynamischer Webanwendungen.

    In dieser Lektion wurden Formulare aus Sicht der View und des ViewModel behandelt. Interaktive Bindungen sind eine intuitive, skalierbare Methode für den Zugriff auf Benutzereingaben. Wir müssen jedoch noch nicht besprechen, wie diese Daten aus dem Front-End und in ein serverseitiges Skript übertragen werden können. In der nächsten Lektion wird dieses Problem gelöst, indem Knockout.js in die AJAX-Funktionalität von jQuery integriert wird.

    Diese Lektion repräsentiert ein Kapitel aus Knockout Prägnant, ein kostenloses eBook aus dem Team von Syncfusion.

    Code
    ×