Share
Das Erstellen datengesteuerter Benutzeroberflächen ist eine der komplexesten Aufgaben eines Webentwicklers. Es erfordert ein sorgfältiges Management zwischen der Schnittstelle und den zugrunde liegenden Daten. Stellen Sie sich beispielsweise eine einfache Warenkorb-Oberfläche für eine E-Commerce-Website vor. Wenn der Benutzer einen Artikel aus dem Warenkorb löscht, müssen Sie den Artikel aus dem zugrunde liegenden Datensatz entfernen, das zugehörige Element aus der HTML-Seite des Warenkorbs entfernen und den Gesamtpreis aktualisieren. Für alle außer den trivialsten Anwendungen ist es ein fehleranfälliges Unterfangen, herauszufinden, welche HTML-Elemente auf einem bestimmten Datenelement basieren.
Abbildung 1: Manuelles Nachverfolgen von Abhängigkeiten zwischen HTML-Elementen und den zugrunde liegenden Daten Die JavaScript-Bibliothek von Knockout.js bietet eine einfachere Möglichkeit zum Verwalten dieser Art von komplexen, datengesteuerten Schnittstellen. Anstatt manuell nachzuverfolgen, welche Abschnitte der HTML-Seite sich auf die betroffenen Daten beziehen, können Sie mit Knockout.js eine direkte Verbindung zwischen den zugrunde liegenden Daten und ihrer Präsentation herstellen. Nachdem Sie ein HTML-Element mit einem bestimmten Datenobjekt verknüpft haben, werden alle Änderungen an diesem Objekt vorgenommen automatisch spiegelt sich im DOM.
Abbildung 2: Abhängigkeiten mit Knockout.js automatisch verfolgen So können Sie sich auf die Daten hinter Ihrer Anwendung konzentrieren. Nachdem Sie Ihre HTML-Vorlagen eingerichtet haben, können Sie ausschließlich mit JavaScript-Datenobjekten arbeiten. Mit Knockout.js müssen Sie lediglich einen Artikel aus dem Warenkorb entfernen, indem Sie ihn aus dem JavaScript-Array entfernen, das die Warenkorbartikel des Benutzers darstellt. Die entsprechenden HTML-Elemente werden automatisch von der Seite entfernt und der Gesamtpreis neu berechnet.
Anders ausgedrückt: Mit Knockout.js können Sie eine sich selbst aktualisierende Anzeige für Ihre JavaScript-Objekte entwerfen.
Aber das ist nicht alles, was Knockout alles kann. Neben der automatischen Abhängigkeitsverfolgung bietet es mehrere unterstützende Funktionen für die schnelle Entwicklung responsiver Benutzeroberflächen…
Knockout.js ist ein Client-Seite Bibliothek vollständig in JavaScript geschrieben. Dadurch ist es mit praktisch jeder serverseitigen Software kompatibel, von ASP.NET über PHP, Django, Ruby on Rails bis hin zu benutzerdefinierten Web-Frameworks.
Wenn es um das Frontend geht, verbindet Knockout.js das zugrunde liegende Datenmodell mit HTML-Elementen, indem ein einzelnes HTML-Attribut hinzugefügt wird. Dies bedeutet, dass es in ein vorhandenes Projekt mit minimalen Änderungen an Ihren HTML-, CSS- und anderen JavaScript-Bibliotheken integriert werden kann.
Während Knockout.js mit fast zwei Dutzend Bindungen zum Definieren der Anzeige von Daten geliefert wird, benötigen Sie möglicherweise immer noch ein anwendungsspezifisches Verhalten (z. B. ein Sternebewertung-Widget für von Benutzern eingereichte Filmkritiken). Glücklicherweise können Sie mit Knockout.js problemlos eigene Bindungen hinzufügen. So haben Sie die vollständige Kontrolle darüber, wie Ihre Daten in HTML umgewandelt werden. Da diese benutzerdefinierten Bindungen in die Kernvorlagensprache integriert sind, ist es einfach, Widgets in anderen Teilen Ihrer Anwendung wiederzuverwenden.
Abbildung 3: Wiederverwendung einer benutzerdefinierten Bindung in mehreren Komponenten der Benutzeroberfläche Knockout.js enthält mehrere Dienstprogrammfunktionen, einschließlich Array-Filter, JSON-Analyse und sogar eine generische Methode zum Zuordnen von Daten vom Server zu einer HTML-Ansicht. Diese Dienstprogramme ermöglichen es, große Datenmengen mit nur wenigen Codezeilen in eine dynamische Benutzeroberfläche umzuwandeln.
Knockout.js ist nicht soll ein Ersatz für jQuery, Prototype oder MooTools sein. Es wird nicht versucht, Animationen, generische Ereignisbehandlung oder AJAX-Funktionalität bereitzustellen (Knockout.js) analysieren die von einem AJAX-Anruf erhaltenen Daten). Knockout.js konzentriert sich ausschließlich auf das Design von skalierbaren, datengesteuerten Benutzeroberflächen. Wie Sie die zugrunde liegenden Daten erhalten, liegt ganz bei Ihnen.
Abbildung 4: Knockout.js zur Ergänzung eines vollständigen Webanwendungsstapels Aufgrund dieser hohen Spezialisierung ist Knockout.js kompatibel mit allen anderen Technologien auf Client- und Server-Seite. Dies bedeutet jedoch auch, dass Knockout.js häufig die Verwendung eines umfangreicheren JavaScript-Frameworks erfordert. In diesem Sinne ist Knockout.js eher eine Ergänzung zu einem herkömmlichen Webanwendungs-Stack und nicht zu einem integralen Bestandteil.
Wenn Sie bereit sind, fahren Sie mit der ersten Lektion fort!
Diese Lektion repräsentiert ein Kapitel aus Knockout Prägnant, ein kostenloses eBook aus dem Team von Syncfusion.
Accentsconagua