Neue Art der Datenbindung unter JavaScript

Das Zauberwort heißt Object.observe(). Dieser Befehl bindet eine Behandlungsroutine an ein Datenobjekt. Die Behandlungsroutine wird dann bei jeder Änderung an dem Datenobjekt aufgerufen.

In dem Blogpost http://www.html5rocks.com/en/tutorials/es7/observe/ stellt Addy Osmani das neue Feature von Chrome vor. Ein Beispiel zeigt die Mächtigkeit von Object.observe().

Datenmodel:

var todoModel = { label: 'Standard', completed: false };

Funktion, die auf Veränderungen reagieren soll:

function observer(changes){ changes.forEach(function(change, i){ console.log('what property changed? ' + change.name); console.log('how did it change? ' + change.type); console.log('whats the current value? ' + change.object[change.name]); console.log(change); // all changes }); }

Beide lassen sich über den Aufruf

Object.observe(todoModel, observer);

verbinden. Anschließend gibt die Funktion observer bei jeder Änderung Informationen auf der Konsole aus.

Das betrifft das Ändern des Wertes eines Feldes:

todoModel.label = 'Hurra, das klappt';

als auch das Hinzufügen oder Löschen von Feldern.

Das Ganze funktioniert asynchron und ohne weiteres Dazutun des Entwicklers. Auch die Performance soll wesentlich besser sein, als die Datenbindung bei den bekannten Frameworks wie AngularJS, Knockout.js oder EmberJS.

Die Erweiterung befindet sich im Betastatus. [tib]