Now.js Framework Documentation
TemplateManager - Directives Reference
TemplateManager - Directives Reference
Overview
TemplateManager is the core template engine in Now.js Framework, providing powerful data-binding and reactive rendering capabilities through HTML data attributes.
Key Features:
- 🔗 Data Binding - Bind data to text, attributes, and classes
- 🔄 Reactive Updates - Automatic UI updates when data changes
- 📋 List Rendering - Render arrays with
data-for - 🎯 Event Handling - Declarative event binding with modifiers
- 🧩 Dynamic Components - Load components on-demand
Quick Reference
Data Binding Directives
| Directive | Purpose | Example |
|---|---|---|
data-text |
Display text content | data-text="user.name" |
data-html |
Render HTML content | data-html="article.content" |
data-attr |
Set element attributes | data-attr="href:link, title:tooltip" |
data-class |
Toggle CSS classes | data-class="active:isActive" |
data-style |
Set inline styles | data-style="color:textColor" |
Control Flow Directives
| Directive | Purpose | Example |
|---|---|---|
data-if |
Conditional rendering | data-if="user.isLoggedIn" |
data-for |
List iteration | data-for="item in items" |
Form & Input Directives
| Directive | Purpose | Example |
|---|---|---|
data-model |
Two-way binding | data-model="form.username" |
data-checked |
Checkbox/radio state | data-checked="options.enabled" |
Event & Component Directives
| Directive | Purpose | Example |
|---|---|---|
data-on |
Event handling | data-on="click:handleClick" |
data-container |
Dynamic components | data-container="currentView" |
data-script |
Init script binding | data-script="initPage" |
Expression Syntax
Basic Data Access
<!-- Simple property -->
<span data-text="username"></span>
<!-- Nested property -->
<span data-text="user.profile.name"></span>
<!-- Array access -->
<span data-text="items[0].name"></span>With Context Variables
<!-- In data-for loops -->
<div data-for="item in items">
<span data-text="item.name"></span>
<span data-text="index"></span>
</div>Template Interpolation
<!-- Inline expressions -->
<p>Hello, {{ user.name }}!</p>
<p>Total: {{ cart.items.length }} items</p>Common Patterns
Display User Data
<div class="user-card">
<h2 data-text="user.name"></h2>
<p data-text="user.email"></p>
<img data-attr="src:user.avatar, alt:user.name">
</div>Conditional Display
<div data-if="user.isLoggedIn">
<p>Welcome, <span data-text="user.name"></span>!</p>
</div>
<div data-if="!user.isLoggedIn">
<a href="/login">Please login</a>
</div>Dynamic Lists
<ul data-for="item in menuItems">
<template>
<li>
<a data-attr="href:item.url" data-text="item.label"></a>
</li>
</template>
</ul>Form Binding
<form data-form="contact">
<input type="text" data-model="form.name" placeholder="Name">
<input type="email" data-model="form.email" placeholder="Email">
<textarea data-model="form.message"></textarea>
<button data-on="click:submitForm">Send</button>
</form>Detailed Documentation
For comprehensive documentation on each directive, see:
- Core Concepts - Architecture and initialization
- data-text - Text binding with formatters
- data-html - HTML rendering and sanitization
- data-attr - Attribute binding
- data-class - Class binding modes
- data-style - Style binding
- data-if - Conditional rendering
- data-for - List rendering
- data-on - Event handling
- data-model - Two-way binding
- data-checked - Checkbox/radio binding
- data-container - Dynamic components
- data-script - Script initialization
Related
- RouterManager - Route handling
- FormManager - Form processing
- ComponentManager - Component system