[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>
}}}

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