Forms over Data mit Knockout.js: Die freie MVVM-JavaScript-Bibliothek im Praxiseinsatz
Von Tilman Börner
()
Über dieses E-Book
Dieses DevBook führt in die Thematik um Knockout.js ein. Dabei steht ein praxisrelevanter Umgang mit der Bibliothek im Vordergrund. Nach dem Studium des Buches sollten Sie in der Lage sein, Knockout.js in eigenen JavaScipt-Frontends einzusetzen, sämtliche HTML-Eingabeelemente zu nutzen und Daten dynamisch von einem Server nachzuladen und darzustellen.
Ähnlich wie Forms over Data mit Knockout.js
Ähnliche E-Books
Software entwickeln mit C#, WPF und dem MVVM-Konzept Bewertung: 0 von 5 Sternen0 BewertungenJavaScript auf dem Server Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Java-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenSpring: Vier Perspektiven auf Framework und Ökosystem Bewertung: 0 von 5 Sternen0 BewertungenMicrosoft AJAX: AJAX Libary, ASP .NET 2.0 Extensions, AJAX Control Toolkit Bewertung: 0 von 5 Sternen0 BewertungenWebanwendungen erstellen mit Vue.js: MVVM-Muster für konventionelle und Single-Page-Webseiten Bewertung: 0 von 5 Sternen0 BewertungenVue.js für alle: Wissenswertes für Einsteiger und Experten Bewertung: 0 von 5 Sternen0 BewertungenXtend beyond Java: DSL für mobile Business-Apps Bewertung: 0 von 5 Sternen0 BewertungenSingle-Page-Web-Apps: JavaScript im Einsatz: Webseiten erstellen mit AngularJS, Meteor und jQuery Mobile Bewertung: 0 von 5 Sternen0 BewertungenDynamic Proxies: Effizient programmieren Bewertung: 0 von 5 Sternen0 BewertungenEnterprise Java Web Services Bewertung: 0 von 5 Sternen0 BewertungenModerne Webanwendungen mit AngularJS Bewertung: 0 von 5 Sternen0 BewertungenJava FX - Status Quo: Status Quo Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und TypeScript für C#-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenDurchstarten mit React: Web-Apps einfach und modular entwickeln Bewertung: 0 von 5 Sternen0 BewertungenMQL: Eine hierarchische Abfragesprache mit TypeScript erstellen Bewertung: 0 von 5 Sternen0 BewertungenJava 7: Fork-Join-Framework und Phaser Bewertung: 0 von 5 Sternen0 BewertungenMagento Entwicklung: Themes, Widgets und Eigene Entitäten Bewertung: 0 von 5 Sternen0 BewertungenDie Serverwelt von Node.js Bewertung: 0 von 5 Sternen0 BewertungenSoftware Development Trends: Wegweisende Beiträge für eine neue IT: Wegweisende Beiträge für eine neue IT Bewertung: 0 von 5 Sternen0 BewertungenAufsetzen, Testen und Betrieb einer Android-App Bewertung: 0 von 5 Sternen0 BewertungenHTML 5 meets GWT Bewertung: 0 von 5 Sternen0 BewertungenCanvas kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenBig Data: Datenverarbeitung basierend auf MOM und SQL Bewertung: 0 von 5 Sternen0 BewertungenjQuery Mobile: Einfach mobile Web-Apps entwickeln Bewertung: 0 von 5 Sternen0 BewertungenCSS: Grundlagen und Best Practices Bewertung: 0 von 5 Sternen0 BewertungenAngularJS: Testing und Best Practices Bewertung: 5 von 5 Sternen5/5Grails: Webanwendungen mit Groovy und Grails schnell+kompakt Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und Ajax: Das Praxisbuch für Web-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenApache Tapestry: Einstieg in die komponentenorientierte Webentwicklung Bewertung: 0 von 5 Sternen0 Bewertungen
Technik & Ingenieurwesen für Sie
Projektmanagement für Anfänger: Grundlagen, -begriffe und Tools Bewertung: 0 von 5 Sternen0 BewertungenFremdenergie: Die umfassende Analyse und Lösung fremdenergetischer Probleme Bewertung: 0 von 5 Sternen0 BewertungenDIE FALLE. Was sie ist, wie sie funktioniert und wie wir ihren Illusionen entkommen: »Der Schleier der Illusion wird beiseite gefegt!« Bewertung: 0 von 5 Sternen0 BewertungenLexikon der Symbole und Archetypen für die Traumdeutung Bewertung: 5 von 5 Sternen5/5Anglizismen und andere "Fremdwords" deutsch erklärt: Über 1000 aktuelle Begriffe Bewertung: 0 von 5 Sternen0 BewertungenAgiles Projektmanagement: Scrum für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenUniverselle Erfinder (Geschichte und Biographie der Erfinder) Bewertung: 0 von 5 Sternen0 BewertungenHochfrequenz-Messpraxis: Zweckmäßige und kostengünstige Messverfahren für Ausbildung, Labor und Hobby Bewertung: 0 von 5 Sternen0 BewertungenPiano ohne Noten: Einführung ins freie Spielen auf Klavier und Keyboard Bewertung: 0 von 5 Sternen0 BewertungenWAHRNEHMUNGEN EINES ABTRÜNNIGEN DENKERS. Wir wurden in einem unfassbaren Ausmaß getäuscht!: »Wir wurden in einem unfassbaren Ausmaß getäuscht!« Bewertung: 0 von 5 Sternen0 BewertungenBike-Reparatur & Wartung: Funktion, Einstellung, Pflege, Instandsetzung Bewertung: 0 von 5 Sternen0 BewertungenDas ultimative Sprachenlernbuch: Lernen Sie eine Sprache auf Profi-Niveau in 1 Jahr! Bewertung: 0 von 5 Sternen0 BewertungenElektrokonstruktion: Elektrotechnik und Automation Bewertung: 0 von 5 Sternen0 BewertungenGrundlagen abwehrender Brandschutz: Feuerwehrwissen für Architekten, Brandschutzplaner und Ingenieure Bewertung: 0 von 5 Sternen0 BewertungenLean Production - Grundlagen: Das Prinzip der schlanken Produktion verstehen und in der Praxis anwenden. Schlank zur Wertschöpfung! Bewertung: 0 von 5 Sternen0 BewertungenStressfrei Segeln: Perfekte Manöver für Einhandsegler und kleine Crews Bewertung: 0 von 5 Sternen0 BewertungenRisikomanagement für KMUs – Grundlagen: Von der Risikoanalyse bis zum perfekten Risikocontrolling - Risiken erkennen, kontrollieren und vermeiden Bewertung: 0 von 5 Sternen0 BewertungenHypnotische Trance als therapeutische Chance: > aus den Erfahrungen eines ganzheitlich arbeitenden Heilpraktikers < Bewertung: 0 von 5 Sternen0 BewertungenDie ultimative FRITZ!Box Bibel - Das Praxisbuch 2. aktualisierte Auflage - mit vielen Insider Tipps und Tricks - komplett in Farbe Bewertung: 0 von 5 Sternen0 BewertungenWissenswertes über Füllfederhalter: Geschichte, Werdegang, Beweggründe, Technik, Pflege, Reparatur Bewertung: 0 von 5 Sternen0 BewertungenPraktische Autoprüfung: Praktische Fahrprüfung Kategorie B Bewertung: 0 von 5 Sternen0 BewertungenWasserstoff und Brennstoffzellen: Die Technik von gestern, heute und morgen Bewertung: 0 von 5 Sternen0 BewertungenKanban für Anfänger: Grundlegendes über den Einsatz von Kanban in der Industrie und der Softwareentwicklung Bewertung: 0 von 5 Sternen0 BewertungenDie ISO 9001:2015 verständlich formuliert: Qualitätsmanagement praktisch umsetzen Bewertung: 0 von 5 Sternen0 BewertungenTüröffnung Bewertung: 0 von 5 Sternen0 BewertungenDer perfekte Fahrrad Mechaniker: Wartung, Reparatur, Pflege - mit Videos Bewertung: 0 von 5 Sternen0 BewertungenMessmittelmanagement und Kalibrierung: Edition 2020 Bewertung: 5 von 5 Sternen5/5Neues aus Jogis Röhrenbude: Neue High-End-Verstärker Bewertung: 5 von 5 Sternen5/5Künstliche Intelligenz: Die vierte industrielle Revolution Bewertung: 0 von 5 Sternen0 Bewertungen
Verwandte Kategorien
Rezensionen für Forms over Data mit Knockout.js
0 Bewertungen0 Rezensionen
Buchvorschau
Forms over Data mit Knockout.js - Tilman Börner
Knockout.js: Das MVVM-Framework
Sie ist klein, aber unglaublich mächtig. Sie ist gewöhnungsbedürftig, aber irgendwie auch genial. Knockout.js ist in jedem Fall eine JavaScript-Bibliothek, die dabei hilft, Daten, Logik und Darstellung sauber voneinander zu trennen.
Und Trennung ist wichtig. Unzählige Projekte scheitern irgendwann und müssen neu geschrieben werden, weil der Code ein in sich verwobenes Knäuel an Methodenaufrufen ist. Da hilft auch die Objektorientierung nicht automatisch weiter. Erst wer sich an größere Design Pattern wie Model-View-Controller oder Model-View-ViewModel hält, schafft die Trennung. Der geringe Mehraufwand bringt im Endeffekt aber viele Vorteile mit sich: Logik und Datenverarbeitung sind testbar, da sie auch ohne Oberfläche ansprechbar sind, und es lässt sich auf die Logik recht einfach eine andere Oberfläche setzen, wenn beispielsweise plötzlich eine mobile Variante einer Website gefordert wird.
Außerdem können mehrere Entwickler gleichzeitig an verschiedenen Einheiten entwickeln, ohne sich ins Gehege zu kommen.
Knockout.js ist ein Framework, dessen Ziel es ist, für genau diese Trennung zu sorgen. Es handelt sich um ein Model-View-ViewModel-Framework. In der Bezeichnung stecken die drei Komponenten, aus denen es besteht:
View
Die View legt fest, wo welches Control einer Seite platziert sein soll und welches Aussehen es hat. Im Zusammenhang mit Knockout ist das eine Webseite, die per HTML und CSS beschrieben wird.
Model
Das Model ist der Teil im Programm, der sich um die Daten kümmert, die angezeigt werden sollen. Es liest beispielsweise Datensätze aus einer Datenbank, schreibt sie zurück und so weiter.
ViewModel
Das ViewModel ist das Modul, das auf Eingabeaufforderungen aus der View reagiert und Daten an die View zurückschickt. Es stellt sozusagen die Weichen für die Daten, die aus der Datenbank kommen, und sorgt dafür, dass sie im richtigen Gleis – also dem richtigen Control – einlaufen.
SinglePageAppAbbildung 1: So fließen die Daten in einer Single-Page-Anwendung.
Knockout.js vollzieht diese Trennung – wie der Name schon vermuten lässt – für die Sprache JavaScript.
Die Dokumentation von Knockout.js auf der Website http://Knockoutjs.com ist schon recht gut. Trotzdem stolpert man über das ein oder andere Problem, das nicht von der Dokumentation behandelt wird.
Knockout.js ist selbst eine JavaScript-Bibliothek und wird ganz einfach über eine Zeile wie
in eine HTML-Seite eingebunden. Dann sorgt Knockout.js im Hintergrund dafür, dass Events verarbeitet und Daten zurückgegeben werden.
Ein erstes kleines Beispiel soll das illustrieren.
-//W3C//DTD HTML 4.01 Transitional//EN>
type=text/javascript
>
var viewModel =
{
lastname
: ko.observable(Gertrud
)
}
ko.applyBindings(viewModel);
knockout-2.0.0.0.js muss natürlich im selben Verzeichnis liegen wie die HTML-Datei. Wenn nicht, muss der Pfad zu ihr angepasst werden.
Was passiert in dieser Webseite? Die HTML-Datei ist eine View. Alles, was nicht innerhalb der script-Tags steht, gehört dazu. In diesem Beispiel ist die Logik, sprich das JavaScript, in die View eingebettet. Bei größeren Views empfiehlt sich natürlich, den Code in einer eigenen js-Datei auszugliedern.
Neben html, head, title und body gehört dazu insbesondere die Zeile mit dem div-Tag. Diese Zeile definiert ein einfaches Label-Control, also die Anzeige eines Strings.
Die Teile der Datei, die in die script-Tags eingebettet sind, enthalten einmal die Referenz zur Knockout-Bibliothek und dann noch Code, der die Logik des Beispiels ausmacht.
Im Gegensatz zu anderen Bibliotheken bedarf es immer eines ViewModels – im Beispiel durch die Variable viewModel festgelegt.
Im ViewModel wird eine Observable (Funktion) mit Namen lastname über ko.observable() definiert. ko.observable(Gertrud
) legt den Anfangswert auf Gertrud fest. ko.observable() ist eine Funktion von Knockout.js, die dafür sorgt, dass Änderungen an dem Feld an die View übermittelt werden und umgekehrt.
Um den Knockout.js-Mechanismus in Gang zu setzen, damit also aus dem div-Tag eine Art Label wird, bedarf es noch eines Aufrufs von
ko.applyBindings(viewModel);
Die Zeile verbindet ko.observable() im ViewModel mit den Kontrollelementen in der View. Welche Daten wohin müssen, wird in der View durch das Attribut data-bind festgelegt. Sie sehen das im div-Tag:
data-bind=text: lastname
Das Attribut koppelt die Eigenschaft