Knockout.js

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springenZur Suche springen
Knockout
Basisdaten

HauptentwicklerSteve Sanderson
Erscheinungsjahr2010
Aktuelle Version3.5.1[1][2]
(5. November 2019)
Aktuelle Vorabversion2.1.0-pre[2]
(7. März 2014)
BetriebssystemPlattformunabhängig
Programmier­spracheJavaScript
KategorieWebframework
LizenzMIT-Lizenz
www.knockoutjs.com

Knockout.js – oft einfach alsKnockout bezeichnet – ist einfreiesWebframework zur Umsetzung desModel-View-ViewModel-Musters im Rahmen eines Webclients. Es dient zurlosen Kopplung zwischen der Darstellung (HTML-View) und den Nutzdaten (JavaScript-Objekte) durch einen Datenbindungsmechanismus.

Das MVVM-Muster wurde erstmals im Jahr 2005 von dem Microsoft-Architekten John Gossman[3] beschrieben und wird inXAML-basierten Microsoft-Technologien verwendet. Knockout ist eine Portierung dieses ursprünglich technologiespezifischen Entwurfsmusters nachHTML5 undJavaScript. Es wird von dem Microsoft-Entwickler Steve Sanderson entwickelt.[4] Obwohl es gemeinsam mit demASP.NET-MVC-Standard-Template fürWebanwendungen ausgeliefert wird, handelt es sich um kein Microsoft-Produkt.[5]

Gemäß einer seit 2013 aktiven Umfrage von InfoQ handelt es sich nebenAngularJS undBackbone.js um eines der TOP-3-JavaScript-MV*-Frameworks.[6]

Inhaltsverzeichnis

Beschreibung

[Bearbeiten |Quelltext bearbeiten]

Das JavaScript-Framework „Knockout.js“ war eines der ersten MVVM-Portierungen nachJavaScript und findet z. B. Einsatz bei der Implementierung vonSingle-Page-Webanwendungen. Das MVVM-Entwurfsmuster ähnelt demModel-View-Controller-Muster. Allerdings ist dieses Muster von einem Datenbindungsmechanismus – oft alsBinder bezeichnet – abhängig, welcher View und ViewModel als Indirektionsstufe miteinander verknüpft. Dieser Binder wird durch die BibliothekKnockout bereitgestellt.

Mit dem ViewModel wird das Ziel verfolgt, eine zusätzliche Sichtbarkeitsebene zwischen Model und View zu definieren. Es adaptiert die Fachkonzept-Informationen aus dem Model und dient somit als zusätzliche Abstraktion zwischen den Daten und der Darstellung. Auf diese Weise kann dieKopplung zwischen View und Model reduziert werden. Anders als beim MVC-Muster wird auf Controller-Instanzen beim MVVM-Muster verzichtet. Ereignisse, welche in der Benutzeroberfläche auftreten, werden direkt zum ViewModel geleitet und dort behandelt. Zur automatischen Änderungs- und Eventbenachrichtigung verwendet Knockout.js sogenannte Observable-JavaScript-Objekte. Diese Observables kapseln den eigentlichen Wert im ViewModel für die Darstellung in der View und ermöglichen so eine Datenbindung.[7]

Neben dem Datenbindungsmechanismus verfügt Knockout ebenfalls über die Möglichkeit, HTML-Templates zu definieren. Diese Templates können beispielsweise dazu eingesetzt werden, Auswahllisteneinträge aufgrund einer vorgegebenen Menge an Auswahlmöglichkeiten zu erzeugen.Zum funktionalen Umfang von Knockout gehören ausschließlich Funktionalitäten im Rahmen der Darstellung und Datenanbindung. Mechanismen zur Realisierung einer Navigation innerhalb einerSingle-Page-Webanwendung sind nicht vorhanden. Die Fokussierung auf die reine Datendarstellung macht Knockout leichtgewichtiger als andere JS-Frameworks wieAngularJS. Knockout ist unabhängig von anderen JavaScript-Bibliotheken.

Funktionen

[Bearbeiten |Quelltext bearbeiten]
  • Deklarative Datenbindung
  • Beobachter-Muster: Automatische Aktualisierung der View, wenn Änderungen im Model vorliegen.
  • Dependency tracking
  • HTML-Templates

Beispiel

[Bearbeiten |Quelltext bearbeiten]
//HTML-View<div>    You've clicked<spandata-bind="text: numberOfClicks"></span> times<buttondata-bind="click: incrementClickCounter">Click me</button></div><scripttype="text/javascript">//Definition des ViewModelsvarviewModel={numberOfClicks:ko.observable(0),incrementClickCounter:function(){varpreviousCount=this.numberOfClicks();this.numberOfClicks(previousCount+1);}};//Datenbindung per Binder aktivierenko.applyBindings(viewModel);</script>

Literatur

[Bearbeiten |Quelltext bearbeiten]
  • Jamie Munro:Knockout.js: Building Dynamic Client-Side Web Applications. O’Reilly and Associates, 2014,ISBN 978-1-4919-1431-1. 
  • Andrey Akinshin:Getting Started with Knockout.js for .NET Developers. Packt Publishing, 2015,ISBN 978-1-78398-400-8. 

Weblinks

[Bearbeiten |Quelltext bearbeiten]

Einzelnachweise

[Bearbeiten |Quelltext bearbeiten]
  1. Release 3.5.1. 5. November 2019 (abgerufen am 6. November 2019).
  2. abregistry.npmjs.com. In:npmjs. (abgerufen am 8. März 2023).
  3. Introduction to Model/View/ViewModel pattern for building WPF apps
  4. Client Insight – Getting Started with Knockout. Abgerufen am 25. Oktober 2021 (amerikanisches Englisch). 
  5. Steven Sanderson's blog post 'Hello, Microsoft'. blog.stevensanderson.com, 3. November 2010, abgerufen am 8. Januar 2016. 
  6. Top JavaScript MVC Frameworks
  7. Observables in Knockout (englisch)
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Knockout.js&oldid=251062048
Kategorien: