Anfängerleitfaden zu Knockoutjs: Teil 2

Key Takeaways

• Knockoutjs bietet eine Vielzahl von integrierten Bindungen, die den Prozess der Verbindung von UI-Elementen mit Datenmodellen vereinfachen, wodurch es einfach ist, dynamische und reaktionsschnelle Benutzeroberflächen zu erstellen.
• Die Text- und Wertbindungen in KnockoutJs ermöglichen eine einfache Zwei-Wege-Datenbindung für HTML-Elemente und aktualisieren die Benutzeroberfläche automatisch, wenn sich das Datenmodell ändert und umgekehrt.
• KnockoutJs enthält Ereignisbindungen wie `click` und` ubschritt ", mit denen Entwickler UI -Elemente ohne manuelle Ereignisbehandlung Verhalten hinzufügen können, um den Entwicklungsprozess zu optimieren.
• Die Bibliothek unterstützt bedingte und Stilbindungen wie "sichtbar", "Enable" und "CSS", wodurch Entwickler die Sichtbarkeit der Elemente und das Styling dynamisch auf dem Datenmodellzustand kontrollieren können.
• Erweiterte Funktionen wie die "Optionen" -Bindung für Dropdown -Listen und die "Checked" -Bindung für Kontrollkästchen und Optionsfelder bieten robuste Tools für die Behandlung komplexerer Formularelemente innerhalb der Benutzeroberfläche.

Ein Anfängerleitfaden zu KnockoutJs: Bindings

Knockout bietet eine ganze Reihe nützlicher integrierter Bindungen für die häufigsten Aufgaben und Szenarien. Jede dieser Bindungen ermöglicht es Ihnen, einfache Datenwerte zu binden oder JavaScript -Ausdrücke zu verwenden, um den entsprechenden Wert zu berechnen. Dies bietet viel Flexibilität und erleichtert es einfach, eine sehr dynamische Benutzeroberfläche mit minimalem Aufwand zu erstellen.

Die Syntax zur Verwendung der integrierten Bindungen besteht darin, den Knockout-Bindungsnamen und die Ansichtsmodelleigenschaftspaare in das Datenbindungsattribut eines HTML-Elements einzubeziehen.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Wenn Sie Daten im HTML -Element an mehr als eine Eigenschaft binden möchten, trennen Sie einfach die Bindungen durch ein Komma mit dieser Syntax:

<span data-bind="text: msg, visible: toggle"></span>

Sie sollten bedenken, dass die meisten Bindungen versuchen, einen Parameter in einen booleschen Wert umzuwandeln. Wenn Sie einen Wert angeben, der eigentlich nicht boolean ist, wird er lose als Wahrheit oder Falsy interpretiert. Dies bedeutet, dass Zahlen ungleich Null und Nicht-Null-Objekte und nicht leere Zeichenfolgen alle als wahr interpretiert werden, während Null-, Null-, undefinierte und leere Zeichenfolgen als falsch interpretiert werden.

Wenn Sie verstehen, wie eine Art von Datenbindung verwendet wird, sollten die anderen ziemlich leicht zu lernen sein. Jetzt werden wir jeden von ihnen erklären, indem wir eine Beschreibung und ein kurzes Beispiel angeben.

einfache Bindungen

Wir haben bereits Textbindungen beim Umgang mit Observablen im vorherigen Tutorial gesehen. Es legt den Text des zugehörigen Elements auf den Wert Ihres Parameters fest. Dies ist das Äquivalent zum Einstellen der InnerText (für IE) oder TextContent (für andere Browser) des DOM -Elements. Wenn Ihr Parameter etwas anderes als eine Zahl oder eine Zeichenfolge ist, weist die Bindung dem Element die Ergebnisse von toString () zu.

.

Wenn dieser Parameter ein beobachtbarer Wert ist, aktualisiert die Bindung den Text des Elements, wenn sich der Wert ändert. Wenn der Parameter nicht beobachtet werden kann, wird der Text des Elements nur einmal festgelegt und später nicht erneut aktualisiert. Dies gilt für alle Bindungen.

Die Textbindung wird häufig verwendet, um Werte in einer Spannweite oder einem Div -Element anzuzeigen. Wenn es verwendet wird, wird jeder frühere Text überschrieben.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Die Wertbindung legt den Wert des zugehörigen Elements zum Wert Ihres Parameters fest. Dies wird normalerweise für Formularelemente wie Eingabe, Auswahl und Textbereich verwendet. Wenn der Benutzer den Wert in der zugeordneten Formregelung bearbeitet, aktualisiert er den Wert in Ihrem Ansichtsmodell. Wenn Sie den Wert in Ihrem Ansichtsmodell aktualisieren, aktualisiert dies den Wert der Formularsteuerung auf dem Bildschirm. Dies ist als Zwei-Wege-Bindung bekannt. Wenn Ihr Parameter etwas anderes als eine Zahl oder eine Zeichenfolge ist, weist die Bindung dem Element die Ergebnisse von toString () zu.

standardmäßig aktualisiert Knockout Ihr Ansichtsmodell, wenn sich der Benutzer auf einen anderen DOM -Knoten auf das Änderungsereignis überträgt. Wenn Ihre Bindung auch einen Parameter namens ValueUpdate enthält, definiert dies, welcher Browser -Ereignis -Knockout zur Erkennung von Änderungen verwendet werden sollte.

"Änderung" ist das Standard -Ereignis und aktualisiert Ihr Ansichtsmodell, wenn der Benutzer den Fokus auf ein anderes Steuerelement oder bei Elementen unmittelbar nach einer Änderung verschiebt.

.

"AfterKeydown" - Aktualisiert Ihr Ansichtsmodell, sobald der Benutzer mit der Eingabe eines Zeichens beginnt. Dies funktioniert, indem es das Schlüsseldown -Ereignis des Browsers fängt und das Ereignis asynchron behandelt. Wenn Sie Ihr Ansichtsmodell in Echtzeit über "AfterKeydown" in Echtzeit aktualisieren möchten, ist dies die beste Wahl.

"KeyUp" - Aktualisiert Ihr Ansichtsmodell, wenn der Benutzer einen Schlüssel veröffentlichen

"Schlüsselpress" - Aktualisiert Ihr Ansichtsmodell, wenn der Benutzer einen Schlüssel eingegeben hat. Dies aktualisiert sich wiederholt, wenn der Benutzer einen Schlüssel nach unten hält

<span data-bind="text: msg, visible: toggle"></span>

Steuermarke

Die HTML -Bindung wird nicht so oft verwendet, ist jedoch sehr praktisch, um HTML -Inhalte in Ihrem Ansichtsmodell zu rendern. Diese Bindung legt die HTML des zugehörigen Elements auf den Wert Ihres Parameters fest und entspricht der Einstellung der innerhtml -Eigenschaft im DOM -Element. Wenn Ihr Parameter etwas anderes als eine Zahl oder eine Zeichenfolge ist, weist die Bindung dem Element die Ergebnisse von toString () zu.

.

Da dieses Bindungsinhalt den Inhalt Ihres Elements mit InnerHTML festlegt, sollten Sie darauf achten, dass Sie ihn nicht mit nicht vertrauenswürdigen Modellwerten verwenden, da dies die Möglichkeit eines Skriptinjektionsangriffs eröffnen könnte. Wenn Sie nicht garantieren können, dass der Inhalt sicher angezeigt wird, können Sie stattdessen die Textbindung verwenden.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Während Knockout viele eingebaute Bindungen hat, werden Sie sicherlich auf einige Situationen stoßen, für die es keine gibt. Für diese bietet Knockout die ATT -Bindung, mit der Sie Daten an eine Attribut an eine Ansichtsmodelleigenschaft binden können. Der Parameter sollte ein JavaScript -Objekt sein, bei dem die Eigenschaftsnamen die Attribute und die Eigenschaftswerte der Wert sind, der an das Attribut gebunden ist. Dies ist in vielen gemeinsamen Szenarien sehr nützlich, z.

<span data-bind="text: msg, visible: toggle"></span>

Styling

hinzufügen

Sie können Stile mit dem Knockout mit dem CSS und den integrierten Stilbindungen binden.

CSS -Bindung legt einen oder mehrere CSS -Klassen für das zugehörige Element fest. Der Parameter sollte ein JavaScript -Objekt sein, bei dem die Eigenschaftsnamen den gewünschten CSS -Klassen entsprechen und die Eigenschaftenwerte, die zu True oder False ausgewertet werden, angeben, ob die Klasse angewendet werden soll. Sie können mehrere CSS -Klassen gleichzeitig festlegen.

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Sie können einen Ausdruck verwenden, um festzustellen, wann die Klasse angewendet wird.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Während es besser ist, CSS -Klassen zu verwenden, wann immer möglich, möchten Sie manchmal auch einen bestimmten Stil festlegen. Knockout unterstützt dies mit seiner integrierten Stilbindung, die einen oder mehrere Stilwerte für das zugehörige Element festlegt. Der Parameter sollte ein Objekt sein, dessen Eigenschaften den Namen der CSS -Stile entsprechen, und die Werte entsprechen den Stilwerten, die Sie anwenden möchten. Typischerweise wird dieser Parameterwert mit JSON deklariert.

<div data-bind="html: markup"></div>

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

Hinweis: Wenn Sie eine Attribut- oder CSS -Klasse haben, deren Name kein rechtlicher JavaScript -Variablenname ist, sollten Sie den Bezeichner -Namen in Anführungszeichen einwickeln, damit er zu einem String -Literal wird. Und wenn Sie einen Stil anwenden möchten, dessen Name keine legale JavaScript -Kennung ist, müssen Sie den JavaScript -Namen für diesen Stil verwenden.

<img data-bind="attr: {src: url, alt: details}" />

function viewModel() {
 var self = this;
 self.url = ko.observable(images/logo.png)
 self.details = ko.observable('This is logo')
};
ko.applyBindings(new viewModel());

Handling Ereignisse

Knockout unterstützt die Bindung an jedes Ereignis durch seine integrierte Ereignisbindung. Es fügt Ereignishandler für die angegebenen Ereignisse zum zugehörigen DOM -Element hinzu. Sie können dies verwenden, um an definierte HTML -Ereignisse zu binden. In Ihrem Ereignishandler können Sie auf das aktuelle Ansichtsmodelldatenelement, das Ereignisobjekt oder sogar benutzerdefinierte Parameter zugreifen, die als Teil der Ereignisbindung übergeben wurden. Um die Ereignisbindung zu verwenden, übergeben Sie ein Objektliteral, das Namenswertpaare für den Ereignisnamen und die View -Modellmethode enthält, die durch Kommas getrennt ist.

<style>
.colorize {color: red}
</style>

<p data-bind="css: { colorize: on }">Text</p>

function viewModel() {
 var self = this;
 self.on = ko.observable(true)
};
ko.applyBindings(new viewModel());

Klicken Sie auf die Bindung, wie Sie vielleicht erraten, das Klickereignis. Da es die am häufigsten verwendete Bindung für Ereignisse ist, ist es einfach eine Abkürzung zur Ereignisbindung.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Senden -Bindung ist eine Abkürzung für die Behandlung des Submit -Ereignisses für das Formularelement. Wenn Sie die Sendel -Bindung in einem Formular verwenden, verhindert Knockout die Standardeinstellung des Browsers für dieses Formular. Mit anderen Worten, der Browser ruft Ihre Handler -Funktion auf, übermittelt das Formular jedoch nicht an den Server. Dies ist eine nützliche Standardeinstellung, da Sie das Formular bei der Verwendung der Senden -Bindung normalerweise nicht als reguläres HTML -Formular verwenden. Wenn Sie das Formular wie ein normales HTML -Formular einreichen möchten, kehren Sie einfach von Ihrem Subing -Handler zurück.

Anstatt das Senden im Formular zu verwenden, können Sie auf die Schaltfläche Senden klicken. Mithilfe der Subjektbindung haben Sie jedoch die Vorteile der Verwendung alternativer Möglichkeiten zum Senden des Formulars, z. B. das Drücken der Eingabetaste beim Eingeben in ein Textfeld.

ui

kontrollieren

sichtbare Bindung legt die Sichtbarkeit des zugehörigen Elements basierend auf dem Bindungsparameterwert fest. Die Bindung versucht, einen Parameter in einen booleschen Wert umzuwandeln. Die sichtbare Bindung von Knockout sollte an eine Eigenschaft gebunden sein, die an True oder False bewertet wird. Dies hat Vorrang gegenüber jedem Anzeigstil, den Sie mit CSS definiert haben.

<span data-bind="text: msg, visible: toggle"></span>

Bindung aktivieren/deaktivieren, legt das deaktivierte Attribut für das zugeordnete Element basierend auf dem angegebenen Wert fest. Dies wird normalerweise für Formularelemente wie Eingabe, Auswahl und Textbereich verwendet. Knockout bietet integrierte Bindungen, um Eingangselemente zu aktivieren und zu deaktivieren. Die Enable -Bindung ermöglicht das Eingabeelement, wenn die Eigenschaft, die sie an True bewertet, das Element bewertet, und deaktiviert das Element, wenn es auf False bewertet wird. Die Deaktivierungsbindung macht genau das Gegenteil

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Knockout hat eine eingebaute Bindung mit dem Namen HASFOCUS, die bestimmt und setzt, welches Element den Fokus hat. Die HASFOCUS -Bindung ist praktisch, wenn der Fokus auf einem Formular in einem Formular eingestellt wird, z. B. Suchformular, wenn Besucher die Seite

öffnen

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Umgang mit Kontrollkästchen und Optionsfeldern

Kontrollkästchen können Daten an die überprüfte Bindung von Knockout gebunden sein. Die geprüfte Bindung sollte an eine Eigenschaft oder einen Ausdruck gebunden sein, der an True oder False bewertet wird. Da die Eigenschaften des Ansichtsmodells als Observable definiert sind, wird das Kontrollkästchen aktualisiert, wenn sich die Quelleigenschaft ändert. Wenn ein Benutzer das Kontrollkästchen überprüft oder deaktiviert, wird der Wert in der Eigenschaft der Ansichtsmodell aktualisiert. Diese Bindung legt den geprüften Status von Optionsfeldern und Kontrollkästchen fest. Bei Kontrollkästchen versucht die Bindung, einen Parameter in einen booleschen Wert umzuwandeln. Für Optionsfelder vergleicht die Bindung das Wertschaltungsattribut der Schaltfläche mit dem Parameter Bindung.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Dropdown -Listen erstellen

Dropdown -Listen haben mehrere wichtige Eigenschaften, um eine Liste von Elementen zu laden, einen Wert anzuzeigen, einen anderen Schlüsselwert zu verwenden und die Auswahl des Benutzers zu speichern. Das Knockout bietet eine eingebaute Bindung für jede von diesen. Optionenbindung legt die Optionen fest, die in einem Dropdown-Listelement angezeigt werden. Der Wert sollte ein Array sein. Diese Bindung kann nicht mit etwas anderem als Elementen verwendet werden. Verwenden Sie für eine Multi-Select-Liste, um festzustellen, welche der Optionen ausgewählt sind, oder um zu lesen, welche der Optionen ausgewählt sind, die ausgewählte Bindung ausgewählt. Für eine Einzelauswahlliste können Sie auch die ausgewählte Option mit der Wertbindung lesen und schreiben.

Die Optionsbindung identifiziert eine Liste von Werten, die normalerweise aus einer Array -Eigenschaft im Ansichtsmodell angezeigt werden.

<span data-bind="text: msg, visible: toggle"></span>

Die ausgewählten Bindungssteuerungen, die Elemente in einer Multi-Select-Liste derzeit ausgewählt sind. Wenn der Benutzer ein Element in der Multi-Selekt-Liste auswählt oder entzieht

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Manchmal möchten Sie einen Wert in der Dropdown -Liste anzeigen, verwenden jedoch einen anderen Wert, wenn ein Benutzer ein Element aus der Liste auswählt. Die integrierten OptionStestext- und Optionen-Wert-Bindungen von Knockout helfen. Die OptionStext -Bindung wird auf den String -Namen der Eigenschaft festgelegt, um in der Dropdown -Liste aus der Optionsbindung angezeigt zu werden. Die OptionValue -Bindung wird auf den Zeichenfolgennamen der Eigenschaft festgelegt, an die der ausgewählte Wert des Elements in der Dropdown -Liste gebunden ist. Optionskaption ist nützlich, wenn Sie standardmäßig keine prttikuläre Option ausgewählt haben möchten. Dieser Parameter setzen einen Text wie "Wählen Sie ein Element aus ..." oben in der Optionsliste und zeigen Sie ihn an, wenn kein bestimmtes Element ausgewählt ist.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Und das ist alles für diesen Teil, bleibt auf dem Finale, gleichzeitig nächste Woche!

häufig gestellte Fragen zu Knockoutjs

Was ist der Unterschied zwischen KnockoutJs und anderen JavaScript -Bibliotheken? Im Gegensatz zu anderen JavaScript-Bibliotheken verwendet KnockoutJS ein Modell-View-ViewModel-Designmuster (Modell-View-ViewModel), in dem das Modell und die Ansicht getrennt sind, so Es bietet auch automatische UI -Aktualisierung, wenn sich das Datenmodell ändert und deklarative Bindungen für die Verbindung von Teilen der Benutzeroberfläche mit dem Datenmodell bietet. Deklarative Bindungen zum Anschließen von Teilen der Benutzeroberfläche mit dem Datenmodell. Dies bedeutet, dass Sie Daten leicht an HTML -Elemente auf eine Weise binden können, die leicht zu verstehen und zu warten ist. Wenn das Datenmodell ändert

Können KnockoutJs mit anderen JavaScript -Bibliotheken zusammenarbeiten? Es macht keine Annahmen über den Rest Ihres Technologiestapels aus, sodass es in andere Bibliotheken oder Frameworks wie JQuery, Bootstrap oder sogar AngularJs integriert werden kann. >

Knockoutjs bietet eine CSS -Bindung, mit der Sie ein oder mehrere benannte CSS -Klassen zum zugehörigen DOM -Element hinzufügen oder entfernen können. Diese Bindung ist besonders nützlich, wenn Sie eine CSS -Klasse bedingt auf ein Element anwenden möchten, das auf einer Datenbedingung basiert. Über Änderungen und automatisch Erkennung von Abhängigkeiten. Diese Funktion ist für KnockoutJs von grundlegender Bedeutung, da die Bibliothek die richtigen Teile der Benutzeroberfläche automatisch aktualisieren kann, wenn sich das Datenmodell ändert. KnockoutJs können mit jeder serverseitigen Technologie verwendet werden. Es ist agnostisch für die serverseitige Sprache, die Sie verwenden, sodass Sie sie mit PHP, .NET, Java, Ruby, Python oder einer anderen serverseitigen Sprache verwenden können. Sie müssen nur JSON-Daten an den Client senden und dann mit KnockoutJs diese Daten an Ihre HTML-Bindung binden. Validierungsmechanismen. Es kann jedoch leicht in andere Validierungsbibliotheken wie JQuery-Validierung oder Knockout-Validation integriert werden, ein separates Plugin, das speziell für die Formularvalidierung in KnockoutJs entwickelt wurde. 🎜> Während Knockoutjs hauptsächlich für die Webentwicklung ausgelegt ist, kann es auch in der Entwicklung der mobilen App in Kombination mit anderen Technologien wie Telefonlap oder Cordova verwendet werden, mit denen Sie dies ermöglichen können Erstellen Sie native Apps mithilfe von HTML, CSS und JavaScript. Es bietet auch andere Ereignisbindungen wie "Ereignis", "Senden", "Enable", "Deaktivieren", "hasfocus" und mehr. Diese Bindungen machen es einfach, die Benutzerinteraktionen auf deklarative Weise zu verarbeiten. Das MVVM-Designmuster erleichtert die Verwaltung komplexer datengesteuerter Schnittstellen, und sein System von Observables und Bindungen hilft, den Code selbst für große Anwendungen organisiert und zu warten.

Das obige ist der detaillierte Inhalt vonAnfängerleitfaden zu Knockoutjs: Teil 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!