13. Oktober 2008 JS Data Binding mit Chain.js

in Kategorie JavaScript

Tags: bcmuc08, data binding, JavaScript, jquery, MVC, plugin, ria, soa

Auf dem Barcamp München 08 hielten Rizqi Ahmad und Robert M. eine Session zum Thema Data Binding in JavaScript. Chain.js ist ein von Rizqi entwickeltes jQuery Plugin und soll die Entwicklung von RIAs erleichtern.

MVC? Und was ist mit dem Client?

Die häufige Herangehensweise bei der Entwicklung von Webapplikationen ist die Nutzung eines Frameworks wie Rails, Django, Zend Framework, usw. All diese Frameworks implementieren das sog. MVC-Design-Pattern. Bei UI-lastigen, clientseitigen Anwendungen reicht dieser Ansatz aber eigentlich nicht aus. Hier tritt die Kommunikation über AJAX zwischen Server und Client viel stärker in den Vordergrund. Häufiger Ansatz ist es fertig generiertes HTML direkt an den Client zu senden und mit innerHTML einzubetten. Wesentlich eleganter wäre die Kommunikation nur über die reinen Daten z.B. in JSON.

Service-oriented Architecture

Dieser Ansatz ist nicht neu. Man findet im Web – häufig unter Web2.0-Angeboten – immer mehr APIs und Web Services. Bei SOA wird der Datenaustausch über Schnittstellen – die sog. APIs – definiert. Große Teile der Anwendungslogik werden auf den Client ausgelagert, der dann selbst mit den Daten umgehen muss. Man bräuchte also eigentlich ein zweites Framework auf der Clientseite, um mit großen Datenmengen vernünftig umgehen zu können.

Chain.js

Es existieren bereits einige Template-Engines auf JavaScript-Basis. Einen etwas anderen und simpleren Weg geht Rizqi aber mit seinem Chain.js Plugin. Hier gibt es keine spezielle Template-Syntax, stattdessen wird der DOM anhand der IDs und Klassen durchsucht, wie man es auch schon von jQuery gewohnt ist, und mit den Daten befüllt. Ein Beispiel:

<div id="quickdemo">
	<div class="item">
		<span class="library">Library Name</span>
	</div>
</div>

$('#quickdemo')
    .items([
        {library:'Prototype'},
        {library:'jQuery'},
        {library:'Dojo'},
        {library:'MooTools'}
    ])
    .chain();

Das Ergebnis nach Ausführung des obigen JS-Codes sieht dann so aus:

<div id="quickdemo">
	<div class="item chain-item">
		<span class="library">Prototype</span>
	</div>
	<div class="item chain-item">
		<span class="library">jQuery</span>
	</div>
	<div class="item chain-item">
		<span class="library">Dojo</span>
	</div>
	<div class="item chain-item">
		<span class="library">MooTools</span>
	</div>
</div>

Die Verwendung ist, wie man sieht, ganz einfach und trotzdem ist Chain.js erstaunlich flexibel. Im Wiki zu Chain.js gibt es noch weitere Beispiele und in Rizqis Blog sind auch einige Artikel zum Thema zu finden.

Ähnliche Artikel

• MVC mit Zend Framework
• Die 10 nützlichsten Ubiquity Kommandos
• Qimaya - Die neurosemantische Suchmaschine
• Barcamp München 08 - Schee woars
• Der neue Stern am CMS-Himmel! Oder doch nicht?

Der Beitrag wurde am Montag, den 13. Oktober 2008 um 15:34 Uhr veröffentlicht und wurde unter JavaScript abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.