Pipeline
template -> GCode -> GCompile -> GTpl
Reactive Core
State changes are observed via Proxy and mapped to bind trees for direct DOM updates.
Directive Model
Use built-ins like g-if, g-for, g-switch or register your own directives.
Basics: variables and constants
load default data: {{
this.fnc = function(...params) { return 'return: ' + [...params].join(); }
this.foo = 'hello';
this.loaded = true;
return 'OK';
}}
constant: {{ 'constant' }}
constant + function:
{{ 'constant':fnc }}
{{ 'constant':fnc() }}
{{ 'constant':fnc('123') }}
foo: {{ foo }}
Functions, formulas, and events
load default data: {{
this.value = Math.random();
this.translate = function(word){ return 'translate ' + word; }
this.foo = function(){ console.log(...arguments); }
this.loaded = true;
this.numA = Math.random();
this.numB = Math.random();
return 'OK';
}}
constant: {{ 'constant' }}
constant translate: {{ 'constant':translate }}
constant translate translate: {{ 'constant':translate:translate }}
value: {{ value }}
value translate: {{ value:translate }}
value translate translate: {{ value:translate:translate }}
sum: {{ return ( numA + numB ) }}
Bidirectional variables
constant1: {{ 'foo' }}
constant2: {{ return 1 + 1 }}
value foo: {{ foo }}
value num: {{ num }}
value num + 1: {{ return ( num ? num : 0 ) + 1 }}
Attributes
.cls { color: #00f; }
.weight { font-weight: bold }
div[custom='value'] { background-color: #ff0; }Any Attribute
class Attribute
class Attribute
Styles
color style
all styles
Conditional rendering
Hello world true
Hello world false
Switch
case 0???
CASE 0
case 1???
CASE 1
case 2???
CASE 2
case 3???
CASE 3
case 4???
CASE 4
case 5???
CASE 5
Switch with template containers
{{
const trustedHtml = String.fromCharCode(60) + 'strong>Trusted HTML' + String.fromCharCode(60) + '/strong>';
this.rows = [
{ title: 'Normal', type: 'text', value: 'Plain text' },
{ title: 'Inner', type: 'html', value: trustedHtml },
{ title: 'Component', type: 'component', value: 'DOM node' }
];
this.renderNode = function(row) {
const span = document.createElement('span');
span.style.cssText = 'display:inline-block;padding:2px 6px;border:1px solid #1e855f;color:#1e855f';
span.textContent = row.value;
return span;
};
return '';
}}
{{ row.title }}:
{{ row.value }}
For
Arr1:
arr1[{{ key }}] = {{ value }}
Arr2:
arr1[{{ key }}] = {{ value.des }}
Templates
{{ index }} - {{ value }}
{{ index }} - {{ value }}
Inner HTML
{{ content }}
Quick Reference
Template expressions are wrapped in {{ ... }}. GTPL supports variables, constants, chained functions and formulas.
- {{ foo }}: read variable
- {{ 'constant' }}: constant value
- {{ foo:format }}: pass through function
- {{ return foo + 1 }}: formula expression
- [value]="{{ foo }}": two-way bind attribute/property
- g-if, g-notif, g-switch, g-case, g-for, g-inner
API Summary
| API | Purpose | Example |
|---|---|---|
| gtpl.jit.GCode(html) | Transform template HTML into AOT code string. | const aot = GCode(template) |
| gtpl.jit.GCompile(aot) | Compile generated AOT string into element generator function. | const gen = GCompile(aot) |
| new gtpl.GTpl(options) | Create reactive instance bound to a root object. | new GTpl({ root, generator: gen }) |
| instance.addTo(node) | Append rendered template to target node. | instance.addTo(container) |
| instance.watch(path, cb) | Observe reactive path changes from GTPL state. | instance.watch('foo', cb) |
| instance.destroy() | Unmount elements, listeners and watchers. | instance.destroy() |
Security note: g-inner writes directly to innerHTML. Use trusted HTML sources only.