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>
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). |