Activate JS ist eine JQuery basierende Templating Engine.
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:
<div control="{apply: $.fn.Panel}">
<div>Header</div>
<div>Content</div>
</div>
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.
| Name | Parameter | Beschreibung |
|---|---|---|
| apply | function | Ruft eine Benutzerdefinierte Javascript-Funktion auf dem entsprechenden Element 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. |
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. |
| control | Die aktuelle Control-Struktur, die gerade abgearbeitet wird. |
| key | Der aktuelle Control-Key, der gerade verarbeitet wird. |
| value | Der aktuelle Control-Value, der gerade verarbeitet wird. |
