Aurelia Templating — Advanced Template Features

<template>
  <!-- Compose by module ID -->
  <compose view-model="./shared/header"></compose>

  <!-- Compose with model data -->
  <compose view-model="./shared/user-card"
           model.bind="selectedUser">
  </compose>

  <!-- Compose from an array of configurations -->
  <div repeat.for="widget of dashboardWidgets">
    <compose view-model.bind="widget.component"
             model.bind="widget.data">
    </compose>
  </div>
</template>

<template>
  <!-- Basic if -->
  <div if.bind="isAuthenticated">
    Welcome, ${user.name}!
  </div>

  <!-- if/else (Aurelia 2) -->
  <div if.bind="isLoading">
    <spinner></spinner>
  </div>
  <div else>
    <content></content>
  </div>

  <!-- Nested conditions -->
  <span if.bind="status === 'active'" class="text-green">Active</span>
  <span if.bind="status === 'pending'" class="text-yellow">Pending</span>
  <span if.bind="status === 'blocked'" class="text-red">Blocked</span>
</template>

<template>
  <!-- show: toggles display:none -->
  <div show.bind="isVisible">Always in DOM, hidden when false</div>

  <!-- if: adds/removes from DOM -->
  <div if.bind="isLoaded">Added/removed from DOM</div>

  <!-- Use show for frequently toggled content -->
  <div show.bind="isDropdownOpen" class="dropdown">
    Dropdown content
  </div>
</template>

<template>
  <!-- Basic repeat -->
  <ul>
    <li repeat.for="item of items">${item.name}</li>
  </ul>

  <!-- Repeat with index -->
  <div repeat.for="item of items; index = $index">
    ${$index + 1}. ${item.name}
  </div>

  <!-- Repeat with first/last/even/odd -->
  <tr repeat.for="item of items"
      class="${$first ? 'first' : ''} ${$even ? 'even' : ''}">
    <td>${item.name}</td>
  </tr>

  <!-- Nested repeats -->
  <div repeat.for="category of categories">
    <h2>${category.name}</h2>
    <ul>
      <li repeat.for="product of category.products">
        ${product.name}
      </li>
    </ul>
  </div>
</template>

<template>
  <div if.bind="viewMode === 'grid'">
    <grid-view items.bind="products"></grid-view>
  </div>
  <div if.bind="viewMode === 'list'">
    <list-view items.bind="products"></list-view>
  </div>
  <div if.bind="viewMode === 'table'">
    <table-view items.bind="products"></table-view>
  </div>
  <div if.bind="!viewMode">
    <p>Select a view mode</p>
  </div>
</template>

// src/resources/elements/data-table.ts
export class DataTable {
  // Component accepts replaceable parts
}

<!-- src/resources/elements/data-table.html -->
<template>
  <table>
    <thead>
      <tr>
        <th repeat.for="col of columns">${col.label}</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of rows">
        <td repeat.for="col of columns">
          <template part="cell" part-name.bind="col.key">
            ${row[col.key]}
          </template>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="pagination">
    <template part="pagination">
      <button click.delegate="prevPage()">Previous</button>
      <span>Page ${currentPage}</span>
      <button click.delegate="nextPage()">Next</button>
    </template>
  </div>
</template>

<data-table columns.bind="cols" rows.bind="data">
  <template replaceable-part="pagination">
    <nav class="custom-pagination">
      <a click.delegate="goToPage(1)">First</a>
      <a click.delegate="prevPage()">Prev</a>
      <span>${currentPage} / ${totalPages}</span>
      <a click.delegate="nextPage()">Next</a>
      <a click.delegate="goToPage(totalPages)">Last</a>
    </nav>
  </template>
</data-table>

<!-- my-panel.html -->
<template>
  <div class="panel">
    <div class="panel-header">
      <slot name="header">Default Header</slot>
    </div>
    <div class="panel-body">
      <slot></slot>
    </div>
    <div class="panel-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<my-panel>
  <span slot="header">Custom Header</span>
  <p>Main content goes here</p>
  <button slot="footer">OK</button>
</my-panel>

<template>
  <!-- Debounce an input binding -->
  <input value.bind="searchQuery & debounce:300" />

  <!-- Update on blur only -->
  <input value.bind="user.name & updateTrigger:'blur'" />

  <!-- One-time binding (never updates) -->
  <span>${config.appName & oneTime}</span>

  <!-- Signal-based binding -->
  <div>${message & signal:'my-signal'}</div>
</template>

<template>
  <!-- Safe HTML rendering (needs sanitize-html) -->
  <div innerhtml.bind="content & sanitize"></div>
</template>

<template>
  <!-- Directly bind to async data -->
  <div>${fetchUser().name}</div>

  <!-- Promise resolution -->
  <div>${userPromise.then(u => u.name)}</div>
</template>