Knockout.js

Knockout
[[Datei:|150px]]
Basisdaten
Hauptentwickler	Steve Sanderson
Entwickler
Erscheinungsjahr	2010
Aktuelle Version	()
Aktuelle Vorabversion	()
Betriebssystem
Programmier­sprache	JavaScript
Kategorie	Webframework
Lizenz	MIT-Lizenz
www.knockoutjs.com

Knockout.js – oft einfach als Knockout bezeichnet – ist ein freies Webframework zur Umsetzung des Model-View-ViewModel-Musters im Rahmen eines Webclients. Es dient zur losen 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<ref>Introduction to Model/View/ViewModel pattern for building WPF apps</ref> beschrieben und wird in XAML-basierten Microsoft-Technologien verwendet. Knockout ist eine Portierung dieses ursprünglich technologiespezifischen Entwurfsmusters nach HTML5 und JavaScript. Es wird von dem Microsoft-Entwickler Steve Sanderson entwickelt.<ref>Client Insight – Getting Started with Knockout. Abgerufen am 25. Oktober 2021 (). </ref> Obwohl es gemeinsam mit dem ASP.NET-MVC-Standard-Template für Webanwendungen ausgeliefert wird, handelt es sich um kein Microsoft-Produkt.<ref name="Hello, Microsoft">Steven Sanderson's blog post 'Hello, Microsoft'. blog.stevensanderson.com, 3. November 2010, abgerufen am 8. Januar 2016. </ref>

Gemäß einer seit 2013 aktiven Umfrage von InfoQ handelt es sich neben AngularJS und Backbone.js um eines der TOP-3-JavaScript-MV*-Frameworks.<ref>Top JavaScript MVC Frameworks</ref>

Beschreibung

Das JavaScript-Framework „Knockout.js“ war eines der ersten MVVM-Portierungen nach JavaScript und findet z. B. Einsatz bei der Implementierung von Single-Page-Webanwendungen. Das MVVM-Entwurfsmuster ähnelt dem Model-View-Controller-Muster. Allerdings ist dieses Muster von einem Datenbindungsmechanismus – oft als Binder bezeichnet – abhängig, welcher View und ViewModel als Indirektionsstufe miteinander verknüpft. Dieser Binder wird durch die Bibliothek Knockout 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 die Kopplung 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.<ref>Observables in Knockout (englisch)</ref>

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 einer Single-Page-Webanwendung sind nicht vorhanden. Die Fokussierung auf die reine Datendarstellung macht Knockout leichtgewichtiger als andere JS-Frameworks wie AngularJS. Knockout ist unabhängig von anderen JavaScript-Bibliotheken.

Funktionen

• Deklarative Datenbindung
• Beobachter-Muster: Automatische Aktualisierung der View, wenn Änderungen im Model vorliegen.
• Dependency tracking
• HTML-Templates

Beispiel

<syntaxhighlight lang="html"> //HTML-View

   You've clicked  times
  <button data-bind="click: incrementClickCounter">Click me</button>

<script type="text/javascript">

   //Definition des ViewModels
   var viewModel = {
       numberOfClicks : ko.observable(0),
       incrementClickCounter : function() {
           var previousCount = this.numberOfClicks();
           this.numberOfClicks(previousCount + 1);
       }
   };
   //Datenbindung per Binder aktivieren
   ko.applyBindings(viewModel);

</script>

</syntaxhighlight>

Literatur

• 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

• Webseite mit Beispielen zu Knockout (englisch)
• Präsentation: Knockout – MVVM für JavaScript und HTML5
• Knockout and ASP.NET (englisch)
• Knockout MVC: A framework integrating KnockoutJS into ASP.NET (englisch)
• Knockout questions on StackOverflow (englisch)
• Knockout forum on Google Groups (englisch)
• Knockout JS Examples (englisch)
• Knockout and single-page Webapplications (englisch)

Einzelnachweise

<references />