Anfängerleitfaden zu Knockoutjs: Teil 1

Key Takeaways

• Knockoutjs ist eine JavaScript-Bibliothek, die die Erstellung von reichen, desktop-ähnlichen Web-UIs vereinfacht. Es bietet einen einfachen Zwei-Wege-Bindungsmechanismus, um ein Datenmodell mit einer Benutzeroberfläche zu verknüpfen, wodurch die Synchronisation zwischen ihnen einfach ist.
• Knockout verwendet das Designmuster des Modell-View-View-Modells (MVVM) und spaltet Ihre Anwendung in drei Teile: ein Modell, das die Daten Ihrer Anwendung enthält, eine Ansicht, die als Stecker und Kommunikationsschicht zwischen Modell und Ansicht und a dient Ansicht, das sich auf alle UI -Elemente in Ihrer Anwendung bezieht.
• Knockoutjs basiert auf drei Kernkonzepten: deklarative Bindungen, Abhängigkeitsverfolgung und Vorlagen. Deklarative Bindungen verbinden Teile Ihrer Benutzeroberfläche mit Ihrem Datenmodell. Die Abhängigkeitsverfolgung verwendet Bindungen und spezielle Variablen, die als "Observable" bezeichnet werden, um alle Teile zu aktualisieren, die mit Modelldaten zugeordnet sind, wenn sie sich ändert. Die Vorlagen sind praktisch für die Anzeige einer reichhaltigen Struktur der Ansichtsmodelldaten, während Sie Ihren Code einfach halten.
• Observables sind spezielle JavaScript -Objekte, die in KnockoutJs verwendet werden und die Abonnenten über Änderungen informieren und automatisch Abhängigkeiten erkennen. Dadurch kann die Ansicht automatisch aktualisiert werden, wenn sich das Modell ändert, ohne die DOM manuell manipulieren zu müssen.

Ein Anfängerleitfaden zu KnockoutJs: Grundlagen und Observablen

Leider ist JQuery nicht für jedes Problem eine Lösung. Sobald Sie sich entscheiden, einige komplexere Web -Apps zu erstellen, denen Sie auf ein Problem stoßen - gibt es keine einfache Möglichkeit, Ihre Benutzeroberfläche und Daten dynamisch zu vermitteln. Mit der von JQuery bereitgestellten DOM-Manipulation und Ereignisse, die von JQuery zur Verfügung gestellt werden, ist dies ziemlich schwer zu erreichen. Sie benötigen eine Bibliothek, die Ihnen eine ausgefeiltere Kommunikation zwischen Ihrer Benutzeroberfläche und dem zugrunde liegenden Datenmodell bietet.

Und hier kommt Knockout ins Spiel. Knockout ist eine JavaScript-Bibliothek, die die Erstellung von reichen, desktop-ähnlichen Web-UIs hilft. Es vereinfacht die Benutzerinteraktionen und macht Schnittstellen voll und ganz auf Änderungen der Datenquelle. Knockout bietet einen einfachen Zwei-Wege-Bindungsmechanismus, um ein Datenmodell mit einer Benutzeroberfläche zu verknüpfen, wodurch die Synchronisation zwischen ihnen zu einer Brisse wird.

Obwohl Sie gleichzeitig Knockout mit JQuery verwenden müssen, hängt in einigen Fällen wie animierte Übergänge das Knockout selbst nicht davon ab. Eine andere Sache, die Sie verstehen müssen, ist, dass Knockout nicht mit JQuery konkurriert - beide leisten hervorragende Arbeit. jeder in seine eigene Richtung. Wie Sie sehen, ob Sie die meisten Vorteile erhalten möchten, sollten Sie sie gemeinsam verwenden.

In diesem Tutorial beginnen wir mit den Kernkonzepten und Fähigkeiten des Knockouts. In Teil zwei werden wir die eingebauten Bindungen und die Verwendung ihrer Verwendung tiefer erforschen. Im Finale werden wir einige erweiterte Funktionen und Techniken wie erweiterte Observablen und die Erstellung Ihrer eigenen benutzerdefinierten Bindungen durchlaufen. Fangen wir an!

grundlegende Konzepte

Bevor wir die Codebeispiele durchlaufen, müssen Sie zunächst einige grundlegende Konzepte erfassen. Knockout implementiert das Entwurfsmuster des Modell-View-View-Modells (MVVM) für JavaScript. In diesem Muster ist Ihre Anwendung in drei Teile aufgeteilt:

Ein Modell, das die Daten Ihrer Anwendung enthält. Dies können Daten sein, die von Benutzern oder JSON -Daten eingegeben werden, die von einem Webserver abgerufen wurden.

Eine Ansicht, die als Anschluss- und Kommunikationsschicht zwischen Modell und Ansicht dient. Es hält Daten und Vorgänge zur Manipulation dieser Daten und zeigt sie in der Benutzeroberfläche an. Jedes Mal, wenn das Datenmodell geändert wird, werden korrespondierte UI -Teileaktualisierungen geändert, wobei diese Änderungen widerspiegeln. Das Modell in Ihrer Anwendung wird durch JavaScript Code dargestellt.

Eine Ansicht, die sich auf alle UI -Elemente in Ihrer Bewerbung bezieht. Es ist eine Darstellung der Struktur und Erscheinung für gegebene Benutzeroberfläche. Die Ansicht ist dafür verantwortlich, Daten anzuzeigen und Benutzereingaben zu akzeptieren. Die Ansicht wird durch den HTML/CSS -Code in Ihrer Anwendung dargestellt.

Sie sind drei Kernkonzepte beim Knockout:

1. Deklarative Bindungen: Mit diesen können Sie Teile Ihrer Benutzeroberfläche auf einfache und bequeme Weise mit Ihrem Datenmodell anschließen. Wenn Sie JavaScript direkt verwenden, um DOM zu manipulieren, kann dies zu einem kaputten Code führen, wenn Sie später die DOM -Hierarchie oder die Element -IDs ändern. Mit deklarativen Bindungen, auch wenn Sie die DOM -DOM -Teile ändern, bleiben alle gebundenen Teile in Verbindung. Sie können Daten an ein DOM binden, indem Sie einfach ein Datenbindungsattribut an jedes DOM-Element einbeziehen.

2. Abhängigkeitsverfolgung: Zum Glück zu den Bindungen und einer speziellen Art von Variablen, die als Observable bezeichnet werden, jedes Mal, wenn Ihre Modelldaten alle damit verbundenen Teile geändert haben, werden automatisch aktualisiert. Sie müssen sich keine Sorgen machen, dass Event -Handler und Hörer hinzugefügt werden. All diese zusätzlichen Arbeiten werden intern durch Knockout und Observables ausgeführt, die die Zuhörer benachrichtigen, wenn sich die zugrunde liegenden Werte geändert haben.

3. Vorlagen: Dies ist praktisch, wenn Ihre Anwendung komplexer wird und Sie eine Möglichkeit benötigen, um eine reichhaltige Struktur der Ansichtsmodelldaten anzuzeigen, wodurch Ihr Code einfach bleibt. Knockout verfügt über eine native, eingebaute Template-Engine, die Sie sofort verwenden können. Aber wenn Sie möchten, kann auch eine Template-Engine von Drittanbietern wie jQuery.tmpl oder Unterstrich verwendet werden.

Mach dir keine Sorgen, wenn all diese Theorie für dich dunkel klingt. Wenn wir das Tutorial und die Code -Beispiele durchgehen, wird alles klarer.

Erste Schritte

Bevor wir in Knockout eintauchen, müssen Sie die Bibliothek in Ihrem HTML -Dokument herunterladen und verweisen.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Um Ihren Code von Ihrer Präsentation getrennt zu halten, ist es besser, eine JavaScript -Datei zu erstellen, um alle Anwendungscode zu halten. Und weil wir JQuery in einigen Fällen verwenden, müssen Sie auch darauf verweisen.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Dies gilt als bewährte Praxis, aber für Schulungszwecke und um die Sache zu vereinfachen, können Sie den JavaScript -Code in das gleiche Dokument einfügen, indem Sie ihn entweder in das Kopf -Tag einbeziehen oder Ihr Markup brüllen.

, um ein Ansichtsmodell zu erstellen, deklarieren Sie einfach ein JavaScript -Objekt wie folgt:

  function viewModel() {

   // Your code here
  
  };

Das Datenbindungsattribut (später erklärt) ist nicht in HTML korrigiert, und der Browser weiß nicht, was es bedeutet. Um das Knockout in Kraft zu setzen, muss also durch Einfügen von Ko.Applybindings () -Funktion am Ende des Skripts aktiviert werden. Auch wenn Sie eine externe JavaScript -Datei verwenden oder Ihr Skript in das Kopf -Tag Ihres Dokuments platziert ist, müssen Sie den Knockout -Code in eine JQuery Ready -Funktion einwickeln, um ordnungsgemäß zu funktionieren. Hier ist die grundlegende Vorlage für den Start:

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Aufrufen der Ko.Applybindings () -Methode und der Übergabe in unserem Ansichtsmodell sagt Knockout, das angegebene Modell an unsere Benutzeroberfläche zu binden. Sie können sogar ein DOM -Element bereitstellen, wenn Sie dieses Ansichtsmodell nur an einen Teil Ihrer gesamten Benutzeroberfläche binden möchten. Ko.Applybindings () nimmt zwei Parameter. Der erste Parameter sagt, welches Ansichtsmodellobjekt Sie mit den von ihm aktivierenden deklarativen Bindungen verwenden möchten. Der zweite Parameter ist optional und definiert, welchen Teil des Dokuments Sie nach Datenbindungsattributen suchen möchten. Beispielsweise beschränken Ko.Applybindings (ViewModel, Document.GetElementById ('Container') die Aktivierung mit ID -Container und seinen Nachkommen auf das Element. Dies ist nützlich, wenn Sie mehrere Ansichtsmodelle haben und jeweils eine andere Region der Seite assoziieren möchten.

wie es funktioniert

Mit Knockout können Sie Daten an ein DOM-Element binden, indem Sie ein Datenbindungsattribut in das Markup aufnehmen, das die zur Durchführung von Datenbindungen angibt. Der Code hat nie einen Hinweis auf die DOM -Struktur, sodass Sie die HTML frei ändern können, ohne Ihre Bindungen zu brechen. Im folgenden Beispiel fügen wir das Attribut für Textdatenbindungen zum Span-Element wie folgt hinzu:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

Wenn wir dann den Wert des Textes dynamisch aktualisieren möchten, müssen wir ihn in unserem Ansichtsmodell als beobachtbar deklarieren.

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Dies wird „Der Tag der Woche ist Sonntag aus. Es ist Zeit für die Ruhe “.

Observables

Knockout implementiert beobachtbare Eigenschaften, indem Objekteigenschaften mit einer benutzerdefinierten Funktion namens Ko.Observable ().

this.property = ko.observable('value')

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Knockout erfordert nicht, dass Sie beobachtbare Eigenschaften verwenden. Wenn Sie möchten, dass DOM -Elemente einmal Werte empfangen, aber dann nicht aktualisiert werden, wenn die Werte in der Quellobjektobjekt sich ändern, sind einfache Objekte ausreichend. Wenn Sie jedoch möchten, dass Ihr Quellobjekt- und Zieldomelemente synchronisiert bleibt-zwei-Wege-Bindung-möchten Sie in Betracht ziehen, beobachtbare Eigenschaften zu verwenden.

In einigen Fällen müssen Sie möglicherweise die Werte von zwei oder mehr Observablen zu einem neuen Wert kombinieren. Dies kann mit sogenannten berechneten Observablen erfolgen. Berechnete Observables sind Funktionen, die von einem oder mehreren anderen Observablen abhängig sind, und aktualisieren automatisch, wenn sich eine dieser Abhängigkeiten ändert. Die berechnete Eigenschaft aktualisiert automatisch, wenn eines der Observables, von dem sie für ihre Bewertungsänderung abhängt. Im folgenden Beispiel wird das berechnete beobachtbare Namen Fulldate jedes Mal aktualisiert, wenn sich einer oder mehrere Tag-, Monat- und Jahr Observables ändert.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Der Ko.computed () nimmt einen zweiten Parameter vor. Ohne es weiterzugeben, wäre es nicht möglich gewesen, sich darauf zu beziehen. Um Dinge zu vereinfachen, können Sie ein variables Selbst erstellen und so die Zugabe des zweiten Parameters vermeiden. Von nun an werden wir diesen Ansatz in den Code -Beispielen verwenden.

  function viewModel() {

   // Your code here
  
  };

Wenn Sie sich mit einem Objekt befassen, können Sie alle Änderungen leicht nachverfolgen, indem Sie es in ein beobachtbares umwandeln. Aber was ist, wenn Sie mehrere Objekte haben? In solchen Fällen hat Knockout ein spezielles Objekt namens Ko.observablearray (), das Änderungen einer Sammlung von Dingen erkennen und darauf reagieren kann. Dies ermöglicht das Anzeigen und/oder Bearbeiten mehrerer Werte beispielsweise, wenn Sie wiederholte Abschnitte der UI erfolgen und verschwinden, wenn Elemente hinzugefügt und entfernt werden.

Sie sollten berücksichtigen, dass ein beobachtbares Array verfolgt, welche Objekte im Array sind, nicht im Zustand dieser Objekte. Wenn Sie einfach ein Objekt in ein beobachtbares Array einfügen, werden die Eigenschaften dieses Objekts nicht selbst beobachtbar. Wenn Sie sich wünschen, können Sie diese Eigenschaften beobachtbar machen, aber das liegt ganz bei Ihnen. Ein beobachtbares Array verfolgt nur, welche Objekte es hält, und benachrichtigt die Hörer, wenn Objekte hinzugefügt oder entfernt werden.

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Wenn Sie ein beobachtbares Array erstellen, können Sie es leer lassen oder mit einigen Anfangswerten bevölkern. Im folgenden Beispiel erstellen wir ein beobachtbares Array, das mit den Wochentagen besiedelt ist:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

Wie Sie sehen, können Sie native JavaScript -Funktionen lesen und schreiben. Aber Knockout hat seine eigenen gleichwertigen Funktionen, die Syntax etwas bequemer ist:

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Für die vollständige Liste der verfügbaren Funktionen können Sie die Dokumentation überprüfen.

häufig gestellte Fragen (FAQs) zu Knockoutjs

Was ist der Unterschied zwischen KnockoutJs und anderen JavaScript -Bibliotheken? Im Gegensatz zu anderen JavaScript-Bibliotheken verwendet KnockoutJs ein Modell-View-View-Design-Design (Modell-View-ViewModel), bei dem sich das Modell auf die Daten bezieht, die Ansicht die visuelle Darstellung der Daten und das ViewModel ist das Zwischenmedizin zwischen dem Modell und der Ansicht. Dieses Muster ermöglicht eine klare Trennung von Bedenken und erleichtert Ihr Code leichter zu verwalten und zu testen.

Wie fange ich mit KnockoutJs an? KnockoutJS -Bibliothek in Ihrer HTML -Datei. Sie können es von der offiziellen KnockoutJS -Website herunterladen oder direkt von einem Content Delivery Network (CDN) einbeziehen. Sobald Sie die Bibliothek eingeschlossen haben, können Sie mit der KnockoutJS -Syntax an Ihre ViewModel erstellen und an Ihre Ansicht binden.

Wie funktioniert die Datenbindung in KnockoutJs? Eine Möglichkeit, eine Verbindung zwischen dem Modell (Ihren Daten) und der Ansicht (die DOM -Elemente in Ihrer Webseite) herzustellen. Diese Verbindung ermöglicht Änderungen in Ihren Daten, um die Ansicht automatisch zu aktualisieren und umgekehrt. KnockoutJs bietet mehrere integrierte Bindungen für gemeinsame Aufgaben wie Text und Wertbindung, und Sie können auch benutzerdefinierte Bindungen für komplexere Szenarien erstellen. JavaScript -Objekte, die Abonnenten über Änderungen informieren und automatisch Abhängigkeiten erkennen. In KnockoutJs verwenden Sie Observable, um die Ansicht automatisch zu aktualisieren, wenn sich das Modell ändert, ohne die DOM manuell manipulieren zu müssen. Dies erleichtert Ihr Code sauberer und leichter zu warten. Jede dieser Abhängigkeiten ändert sich. Um ein in KnockoutJS beobachtbares zu erstellen, verwenden Sie die Ko.computed -Funktion und übergeben Sie eine Funktion, die den berechneten Wert zurückgibt. Bindung, damit Sie auf Benutzeraktionen wie Klicks oder Tastenpressen antworten können. In Ihrem ViewModel definieren Sie eine Funktion zur Behandlung des Ereignisses und verwenden dann die Ereignisbindung in Ihrer Ansicht, um das Ereignis mit Ihrer Funktion zu verbinden.

Welche Rolle spielt das ViewModel in KnockoutJs? Es ist verantwortlich für die Aufrechterhaltung des Standes der Ansicht, die Bearbeitung von Benutzeraktionen und die Aktualisierung des Modells bei Bedarf. Das ViewModel ist keine direkte Darstellung der Daten, sondern eine spezielle Version davon für die Ansicht.

Wie verwende ich Vorlagen in KnockoutJs? Markup -Stücke, die mit unterschiedlichen Daten gerendert werden können. Sie können eine Vorlage mit einem Skriptelement mit dem Typ „Text/HTML“ definieren und dann die Vorlagebindung verwenden, um die Vorlage mit Ihren Daten zu rendern. > Debugging KnockoutJS -Anwendungen können mit den Entwickler -Tools des Browsers durchgeführt werden. Sie können die an ein DOM -Element gebundenen Daten unter Verwendung der Ko.Datafor- und Ko.ContextFor -Funktionen überprüfen. Darüber hinaus bietet KnockoutJs die Ko.tojson -Funktion, mit der Ihr ViewModel zur einfachen Inspektion in eine JSON -String umwandelt werden kann. Kann neben anderen JavaScript -Bibliotheken wie JQuery oder Bootstrap verwendet werden. Knockoutjs manipuliert den DOM nicht direkt, sondern aktualisiert die Ansicht basierend auf Änderungen am ViewModel, sodass er nicht in andere Bibliotheken stört, die den DOM manipulieren.

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