Template Syntax

Template Interpolation

The framework uses curly braces {} for dynamic content interpolation in templates. This allows you to embed JavaScript expressions directly in your HTML, making your templates more dynamic and reactive.

Syntax

{ expression }

The expression inside the curly braces can be any valid JavaScript expression that evaluates to a value.

Usage

Basic Value Interpolation

Use curly braces to insert the value of a state property or any JavaScript expression into your HTML:

<div>Hello, {name}!</div>
<p>The answer is {2 + 2}.</p>

Hello , Nazmul!

The answer is 4.

Attribute Interpolation

You can use curly braces within HTML attributes:

<img src="{imageUrl}" alt="User avatar" />
<div class="box {isActive ? 'active' : ''}"></div>

JavaScript Expressions

Any valid JavaScript expression can be used:

<p>{message.toUpperCase()}</p>

<ul>
  {items.map(item =>
  <li>${item}</li>
  ).join('')}
</ul>

Reactivity

Expressions in curly braces are reactive. When the data they depend on changes, the DOM will automatically update to reflect the new values.

Escaping

The framework automatically escapes the content inside curly braces to prevent XSS attacks. If you need to insert HTML, use the i-html directive instead.

Limitations

• Curly brace interpolation is for outputting values only. You cannot use it for control flow (use directives like i-if and i-for instead).
• You cannot use statements (like if or for loops) inside curly braces. Use expressions only.

Examples

<div>
  <h1>{title}</h1>
  <p>Welcome, {user.name}! You have {unreadMessages.length} unread messages.</p>
  <button class="{isActive ? 'btn-active' : 'btn-inactive'}">
    {isActive ? 'Deactivate' : 'Activate'}
  </button>
  <p>Random number: {Math.random()}</p>
</div>

In this example:

• {title} and {user.name} will be replaced with the values of title and user.name from the component's state.
• {unreadMessages.length} shows how you can access properties and call methods on objects.
• The button's class and text demonstrate conditional (ternary) expressions.
• {Math.random()} shows that you can call JavaScript functions.

Remember that all these expressions will be re-evaluated and the DOM updated whenever the relevant data changes.