Activate JS ist eine JQuery basierende Templating Engine.
Inhalt#
Aktueller Status#
Activate JS befindet sich noch in der Entwicklung. Für die Nutzung einer Beta-Version nehmen Sie bitte
Kontakt zu uns auf.
Design Anforderungen#
Es sind bereits einige populäre Templating Engines und Javascript-Framework auf dem Markt. Aus unserer Sicht erfüllt jedoch keines der Frameworks die von uns aufgestellten Forderungen:
- Reines Javascript: Die Implementierung soll in reinem Javascript erfolgen, keine Zwischencompilierung, keine Installation von Tools.
- Einfaches Include in die Web-Page
- Verwenden einer beliebigen Entwicklungsumgebung
- Debugging des Javascript-Codes der 1:1 übereinstimmt, mit dem was geschrieben wurde
- Reines HTML: Die Implementierung des HTML-Codes soll in HTML erfolgen.
- Leichte lesbarkeit, Javascript-Konstrukte wie $("<div>") sollen vermieden werden
- Zusammengehörigkeit des Codes nach dem Lokalitätsprinzip, Code ist nicht unnötig verteilt
- Erweiterbarkeit: Activate JS soll einfach erweitert werden können
- Behandlung neuer Control-Strukturen
- Instantiierung von JQuery-Komponenten
Controls#
Die HTML-Seite wird grundsätzlich in reinem HTML oder XHTML aufgebaut.
Activate JS greift nur durch Controls in den HTML-Code ein. Diese Controls werden über das Attribut control aktiviert.
Apply#
Mit dem Apply control können beliebige Javascript-Funktionen auf das JQuery-Objekt angewendet werden:
<div control="{apply: $.fn.Panel}">
<div>Header</div>
<div>Content</div>
</div>
Erklärung: Das Attribut "control" enthält JSON-Code, der ein oder mehrere Key-Value-Paare enthalten kann. Jeder Key ist einem Control aus $.controls zugeordnet. Im obigen Beispiel also der Key apply ruft $.controls.apply auf. This entspricht dabei dem JQuery-Element des Elements. Verwendet man die Bridge eines JQuery-Widgets, wie etwa $.fn.Panel, wird das JQuery-Widget instantiiert.
Template#
Mit dem Template Control wird der aktuelle DOM-Subtree zum Template mit dem Namen des Value aus dem JSON-Entry erklärt. Der DOM-Subtree wird aus dem aktuellen Browser-Document entfernt, sodass er nicht mehr sichtbar ist:
<div control="{template: 'some-panel', apply: $.fn.Panel}" style="margin-top: 10px;">
<div>Template Header</div>
</div>
Apply Template#
Mit dem Control applyTemplate wird ein mit dem Control template definiertes DOM-Element an der betreffenden Stelle wieder eingefügt. Das betreffende Template kann dabei mehrfach eingefügt werden:
<div control="{applyTemplate: 'some-panel'}">
<div>Individual Content 1</div>
</div>
Erklärung: Das Element (div) mit dem Control applyTemplate wird durch das Template mit dem Namen "some-panel" ersetzt. Dabei werden alle Controls des Templates angewendet, zusätzlich zu den einfügenden Element.
Spezielle Controls#
Diese Controls werden normaler Weise nur intern verwendet. Es macht keinen Sinn, zu versuchen, diese Controls durch das Control-Attribut eines Tags anzusteuern. Der Vollständigkeit halber sollen sie jedoch erwähnt werden.
Children#
Dieses Control aktiviert die Children des aktuell bearbeiteten DOM-Knotens, appliziert also deren Controls und damit auch die Children der Children und so weiter.
Warn#
Damit wird eine Warnung auf der Browser-Konsole ausgegeben, wenn ein Problem bei der Konfiguration oder Verarbeitung der Controls festgestellt wird.
Context#
Ein wichtiges Prinzip von
Activate JS ist der Context, in dem nahezu alle Funktionsaufrufe stattfinden. Der Context ist ein erweiterbares Objekt, das jedoch einige grundlegende Einträge enthält:
| Key | Beschreibung |
|---|
| element | Das aktuelle JQuery-Element in dem der Funktionsaufruf stattfindet. |
| controls | Die aktuelle Control-Struktur, die gerade abgearbeitet wird. |
| control | Der aktuelle Control-Entry, der gerade verarbeitet wird. Er besteht aus key (Name) und value (function). |
| root | Zugriff auf dem Root-Context. Kann für Templates und andere globale Variablen verwendet werden. |