[Activate JS] ist eine JQuery basierende Templating Engine.

!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]

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