Template Expressions & Data Binding

Avenx-JS templates use a small, declarative expression syntax to bind state, handle events, and control structure directly inside your HTML.

Interpolation

Use double curly braces {{ }} to interpolate reactive state or computed values directly into your markup:

<state name="Ada" />
<p>Hello, {{ state.name }}!</p>

Any valid JavaScript expression is supported inside the braces, including property access and simple operations:

<state price="100" />
<p>Total: {{ state.price * 1.1 }}</p>

Attribute Binding

Bind standard HTML attributes to a reactive value by using interpolation {{ }} directly inside the attribute string. Avenx-JS also automatically handles boolean attributes (like disabled, checked):

<state isSubmitting="true" />
<button disabled="{{ state.isSubmitting }}">Submit</button>

For CSS classes specifically, you can use the data-ax-class directive which supports object syntax:

<state isActive="true" />
<div data-ax-class="{ active: state.isActive, inactive: !state.isActive }"></div>

Event Binding

Bind DOM events using the @ prefix, followed by the event name and the handler expression:

<button @click="increment()">Add</button>

The referenced handler must be defined as an action in your component’s script, or be an inline expression.

Avenx-JS also supports event modifiers like .prevent, .stop, and keyboard modifiers like .enter:

<form @submit.prevent="save()">
  <button type="submit">Save</button>
</form>

Structural Directives

Structural directives control whether and how elements are rendered using special tags or attributes.

• data-ax-show — conditionally renders an element by toggling its inline display property.
• <@for> — repeats an element for each item in an array using a custom loop tag.

<ul>
  <@for item in state.items key="item.id">
    <li>{{ item.name }}</li>
  </@for>
</ul>

<p data-ax-show="state.items.length === 0">No items yet.</p>