AngularJS und Knockout im Vergleich

Templating: AngularJS und Knockout-Templates
Kommentare

Frameworks zur Entwicklung von Single Page Applications gibt es mittlerweile wie Sand am Meer. Umso schwerer haben es Architekten und Entwickler, die richtige Technologieentscheidung zu treffen. Egal, für welches Framework man sich aber entscheidet, Templates sollen die Arbeit für Entwickler vereinfachen. In diesem Teil der Serie „AngularJS vs. Knockout“ geht es um den Vergleich der Templates beider Frameworks.

In manchen Fällen ist die Darstellung von UI-Strukturen so komplex, dass sie sich nicht oder nur unschön mit einer Liste oder einer Tabelle realisieren lässt. Für solche Einsatzszenarien stehen sowohl in AngularJS als auch in Knockout Templates bereit. AngularJS sieht vor, dass sich diese sowohl in eine eigene Datei auslagern, als auch inline mit einem Skriptblock deklarieren lassen, wie Listing 4 zeigt.

Innerhalb des Templates wird die AngularJS-Standardsyntax zum Zugriff auf Eigenschaften verwendet. Zur wiederholten Darstellung des Templates wird ein DIV-Container innerhalb des Controller-Scopes benötigt, der die darzustellenden Daten bereithält. Die Controller-Property, die als Datenquelle für die wiederholte Anzeige fungiert, wird mit dem Attribut ng-repeat=“contact in contacts“ festgelegt.

Durch die Angabe ng-include=“‚contact.html'“ lässt sich die Referenz auf das zu verwendende Template definieren. Um auch bei großen Datenmengen eine effiziente Darstellung zu gewährleisten, werden alle Templates, die durch das Attribut type=“text/ng-template“ gekennzeichnet sind, in den AngularJS-Template-Cache geladen. So wird die Anzahl der Zugriffe auf das DOM reduziert. Um Daten aus dem Template-Cache abzurufen, steht die Methode $templateCache.get(‚contact.html‘) bereit. Mit dem Funktionsaufruf $templateCache.put(‚contact.html‘, ‚{{contact.forename}} {{contact.surname}} ‚) können dem Cache neue Inhalte hinzugefügt oder bestehende geändert werden.

  {{contact.forename}} {{contact.surname}}

In Knockout stehen gleich zwei Templating-Varianten zur Auswahl: Natives und String-basiertes Templating. Natives Templating ist in Knockout integriert und benötigt keine zusätzlichen Bibliotheken. Diese Technik nutzt HTML-Markup und verwendet die in Knockout gängigen Kontrollflusssteuerelemente wie if und foreach. Listing 5 zeigt, wie Anzeigevorlagen in Verbindung mit dem foreach-Binding eingesetzt werden können. Damit das Template nicht als JavaScript interpretiert wird und Knockout kein Data Binding vornimmt, muss dieses in einen Skriptblock mit dem Attribut type=“text/html“ geschachtelt werden.

Farbcode:

Um vor oder nach dem Rendering, beziehungsweise nach dem Entfernen von Elementen, Manipulationen vornehmen zu können, stehen die Methoden afterRender, afterAdd und beforeRemove zur Verfügung. Des Weiteren wird String-basiertes Templating unterstützt. Diese Vorgehensweise bedingt das Verwenden von externen Bibliotheken wie jQuery.tmpl oder Underscore.js.

Der Vorteil beider Engines liegt darin, dass Templates asynchron mittels Technologien wie AJAX bei Bedarf nachgeladen werden können und nicht Teil des initial geladenen Markups sind. Bei jQuery.tmpl handelt es sich, wie der Name schon vermuten lässt, um eine jQuery-Erweiterung. Entwickler, die bereits Erfahrung mit dieser Template-Engine haben, können ihr vorhandenes Know-how somit in Knockout verwenden. Underscore.js ist eine JavaScript-Bibliothek, die viele nützliche Funktionserweiterungen, wie etwa die Methode _.template(templateString, [data], [settings]), bereitstellt. Sie kompiliert Templates in JavaScript-Funktionen, um ein optimales Rendering zu garantieren. Mit dieser Technologie lässt sich auch bei der Darstellung von großen Datenmengen eine hohe Performance erzielen.

Aufmacherbild: blackboard with drawing template website on tripod standing in office von Shutterstock / Urheberrecht: vetkit

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -