Das Framework Ractive JS funktioniert ohne Polyfill und soll schneller als Angular, Ember oder React sein. Wie soll das funktionieren? Im Gegensatz zu sonstigen Template-Frameworks rendert Ractive.js nicht das komplette Template neu. Ractive behält sich stattdessen die Referenzierungen zu den einzelnen Daten und kann diese dann asynchron ändern.
In dem folgenden Template werden 2 Platzhalter nach der Mustache-Notation definiert. Diesen Platzhaltern wird über das Data-Attribut von Ractive jeweils ein Wert zugewiesen und zur Laufzeit ersetzt. Soweit ist die Funktionsweise denen von anderen Templating-Frameworks wie z. B. Angular sehr ähnlich.
Template
Ractive
Dieses Ractive erzeugt die Ausgabe „Hello World!“ auf dem Bildschirm. Möchte man jetzt z.B. zur Laufzeit die Ausgabe ändern und z. B. die Begrüßung in einer anderen Sprache anzeigen, so kann man dies über die Methode .set(). Hierbei wird nicht der komplette View neu gerendert sondern lediglich die geänderten Nodes. Das obige Template besteht dabei aus einem Paragraph (Element-Node) mit 4 weiteren Nodes (2 Platzhalter, ein Leerzeichen und das !).
Update mit .set()
Daraus erfolg die Ausgabe „Bonjour tout le Monde“. Auf diese Weise können natürlich nicht nur Inhalte geändert werden. Man könnte sogar ganze DOM-Bereiche austauschen oder aber nur die Werte von HTML-Elementen.
Komplexe Objekte
In Ractive kann man Mustache-Notation komplexe Objekte durch Verschachtelung abbilden. Die hierdurch erzeugte Struktur ist analog zu einem assoziativen Array in JavaScript. Der Zugriff auf die Daten erfolg über die Punktnotation.
Template
Ractive
Das obige Konstrukt gibt den Namen des Künstlers, welcher wiederum zu einem Song zugeordnet ist, und den Songtitel aus. Wie schon bei den normalen Daten können auch komplexe Objekte komplett über die Methode .set() ausgetauscht werden.
Da auf diese Art die Schreibweise u. U. ziemlich lang werden kann, ist es möglich im Template sog. Sections zu nutzen. Hierfür wird der Kontext der obersten Hierarchieebene mit einem führenden # als Beginn der Sektion und einem führenden / als Ende der Sektion (in der Mustache-Notation) im Template definiert. Innerhalb der Sektion kann man dadurch die Schreibweise der Platzhalter auf die Properties des Datenobjekts kürzen. Man sollte jedoch im Hinterkopf behalten, dass man beim Verschachteln von solchen Sektionen evtl. zwei Platzhalter aus verschiedenen Datenebenen mit dem gleichen Namen erhält.
Template
Mit den Sektionen lassen sich allerdings nicht nur Datenstrukturen im Template verschachteln. Es ist genauso möglich Kontrollstrukturen und Schleifen aufzubauen.
Möchte man den Wert einer Variable ändern, kann man mit der Methode .set() auch direkt die Werte auf den unteren Ebenen ansprechen. Genauso ist es möglich, Werte in einer Variable zu speichern und dessen Wert zu ändern.
The population of {{country}} is {{format(population)}}.
Mathematische Ausdrücke sind ebenfalls möglich
Event Proxies
Möchte man einen bestimmten Event Trägern, geht dies mit Javascript und jQuery normalerweise über Eventlistener. RactiveJS bietet die Möglichkeit über sog. Event Proxies bestimmte Ergeignisse aus zu lösen. Der Unterschied ist, dass man nicht mehr über die ID oder die Klasse eines Elements geht, sondern diesem Element einen bestimmten Event hinzufügt und diesen über Ractive abonniert. Auf diese Weise wird der Quellcode besser lesbar und dadurch auch einfacher zu warten.
Template
Ractive
oder
Mit ractive.off( ’select’, selectHandler ) kann ein Eventhandler wieder entfernen. Dabei werden alle Eventhandler, die über ractive.on definiert wurden gelöscht, wenn keine Parameter übergeben werden. Alternativ ist es auch möglich auf folgende Art die Eventhandler zu entfernen:
// later...
Keine Kommentare:
Kommentar veröffentlichen