Aurelia List Rendering — Displaying Collections with Repeat

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

  <!-- Object array -->
  <div repeat.for="user of users" class="user-card">
    <h3>${user.name}</h3>
    <p>${user.email}</p>
  </div>
</template>

<template>
  <ul>
    <li repeat.for="item of items; index = $index">
      <span class="index">${$index + 1}.</span>
      <span>${item.name}</span>
      <span if.bind="$first" class="badge">First</span>
      <span if.bind="$last" class="badge">Last</span>
      <span if.bind="$even" class="bg-light">Even</span>
      <span if.bind="$odd" class="bg-dark">Odd</span>
    </li>
  </ul>
</template>

<template>
  <div repeat.for="category of categories">
    <h2>${category.name}</h2>

    <ul>
      <li repeat.for="product of category.products">
        <!-- Access parent context -->
        ${category.name} > ${product.name} ($${product.price})
      </li>
    </ul>

    <!-- Access grandparent context via variable name -->
    <p if.bind="category.products.length === 0">
      No products in ${category.name}
    </p>
  </div>
</template>

<template>
  <!-- Object iteration -->
  <table>
    <tr repeat.for="value of config | keys">
      <td>${value.key}</td>
      <td>${value.value}</td>
    </tr>
  </table>

  <!-- Map iteration -->
  <div repeat.for="entry of userMap">
    <strong>${entry.key}:</strong> ${entry.value.name}
  </div>
</template>

export class ConfigDemo {
  config = {
    theme: 'dark',
    language: 'en',
    timezone: 'UTC'
  };

  userMap = new Map([
    ['alice', { name: 'Alice' }],
    ['bob', { name: 'Bob' }]
  ]);
}

<template>
  <!-- Sort in template (simple) -->
  <div repeat.for="user of users | sortBy:'name'">
    ${user.name}
  </div>

  <!-- Filter and sort -->
  <div repeat.for="user of users | filterBy:'isActive':true | sortBy:'createdAt'">
    ${user.name} — ${user.createdAt | dateFormat}
  </div>

  <!-- With search query -->
  <div repeat.for="user of filteredUsers">
    ${user.name}
  </div>
</template>

export class UserList {
  users = [];
  searchQuery = '';

  get filteredUsers() {
    if (!this.searchQuery) return this.users;
    const q = this.searchQuery.toLowerCase();
    return this.users.filter(u =>
      u.name.toLowerCase().includes(q) ||
      u.email.toLowerCase().includes(q)
    );
  }
}

export class ListManager {
  items = ['Item A', 'Item B', 'Item C'];
  nextId = 4;

  addItem() {
    this.items.push(`Item ${this.nextId++}`);
  }

  removeItem(index) {
    this.items.splice(index, 1);
  }

  insertItem(index) {
    this.items.splice(index, 0, `Inserted ${this.nextId++}`);
  }

  moveItem(fromIndex, toIndex) {
    const [item] = this.items.splice(fromIndex, 1);
    this.items.splice(toIndex, 0, item);
  }

  shuffle() {
    for (let i = this.items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [this.items[i], this.items[j]] = [this.items[j], this.items[i]];
    }
  }

  clear() {
    this.items = [];
  }

  reset() {
    this.items = ['Item A', 'Item B', 'Item C'];
  }
}

<template>
  <div class="sortable-list">
    <div repeat.for="item of items"
         draggable="true"
         dragstart.delegate="onDragStart($event, $index)"
         dragover.delegate="onDragOver($event, $index)"
         drop.delegate="onDrop($event, $index)"
         class="list-item ${$index === dragIndex ? 'dragging' : ''}">
      <span class="handle">&#9776;</span>
      ${item.name}
      <button click.delegate="removeItem($index)">X</button>
    </div>
  </div>
</template>

<template>
  <div>
    <div repeat.for="item of pagedItems" class="item">
      ${item.name}
    </div>

    <div class="pagination" if.bind="totalPages > 1">
      <button click.delegate="goToPage(1)" disabled.bind="currentPage === 1">
        First
      </button>
      <button click.delegate="prevPage()" disabled.bind="currentPage === 1">
        Prev
      </button>

      <span repeat.for="page of pages" class="page">
        <button click.delegate="goToPage(page)"
                class="${page === currentPage ? 'active' : ''}">
          ${page}
        </button>
      </span>

      <button click.delegate="nextPage()" disabled.bind="currentPage === totalPages">
        Next
      </button>
      <button click.delegate="goToPage(totalPages)" disabled.bind="currentPage === totalPages">
        Last
      </button>
    </div>
  </div>
</template>

<template>
  <!-- Use track-by for stable identity -->
  <div repeat.for="item of items" track-by="$index">
    ${item.name}
  </div>

  <!-- Better: use a unique id -->
  <div repeat.for="item of items" track-by="id">
    ${item.name}
  </div>

  <!-- Virtual scrolling for large lists (requires plugin) -->
  <virtual-list items.bind="largeList" item-height="50">
    <template>
      <div class="virtual-item">${$item.name}</div>
    </template>
  </virtual-list>
</template>