Aurelia Binding Commands — One-Way, Two-Way, and Beyond

<template>
  <!-- String values default to one-way -->
  <h1>${pageTitle}</h1>
  <p textcontent.bind="description"></p>

  <!-- Form input values default to two-way -->
  <input value.bind="searchQuery" />
  <select value.bind="selectedCategory"></select>
</template>

<template>
  <!-- Explicit one-way binding -->
  <span textcontent.one-way="user.name"></span>
  <img src.one-way="user.avatarUrl" />
  <a href.one-way="profileUrl">Profile</a>

  <!-- Best for display-only data -->
  <div class.one-way="priorityClass">
    ${priority | statusLabel}
  </div>
</template>

<template>
  <!-- Form inputs -->
  <input value.two-way="user.name" />
  <input type="checkbox" checked.two-way="user.isActive" />
  <select value.two-way="user.role">
    <option value="admin">Admin</option>
    <option value="user">User</option>
  </select>
  <textarea value.two-way="user.bio"></textarea>

  <!-- Custom elements with two-way binding -->
  <date-picker value.two-way="selectedDate"></date-picker>
</template>

<template>
  <!-- Static configuration values -->
  <h1 one-time>${config.appName}</h1>
  <p one-time>Version ${config.version}</p>
  <footer one-time>
    &copy; ${config.currentYear} ${config.company}
  </footer>

  <!-- Labels that never change -->
  <label for="email" one-time>Email Address</label>

  <!-- One-time with textcontent -->
  <span textcontent.one-time="staticLabel"></span>
</template>

<template>
  <!-- Click delegation (efficient for lists) -->
  <ul>
    <li repeat.for="item of items"
        click.delegate="selectItem(item)">
      ${item.name}
    </li>
  </ul>

  <!-- Form events with delegation -->
  <form submit.delegate="onSubmit($event)">
    <input change.delegate="onChange($event)" />
    <input blur.delegate="onBlur($event)" />
    <input focus.delegate="onFocus($event)" />
  </form>

  <!-- Mouse events -->
  <div mouseenter.delegate="onHover()"
       mouseleave.delegate="onLeave()">
    Hover area
  </div>
</template>

<template>
  <!-- Direct event binding -->
  <button click.trigger="save()">Save</button>

  <!-- Non-bubbling events -->
  <input focus.trigger="onFocus()"
         blur.trigger="onBlur()" />

  <!-- Custom events -->
  <my-element custom-event.trigger="handleCustom($event)">
  </my-element>
</template>

<template>
  <!-- Parent passes a callback -->
  <child-component on-select.call="handleSelect($event)">
  </child-component>

  <!-- With arguments -->
  <data-table on-row-click.call="showDetail(row)">
  </data-table>
</template>

export class ParentComponent {
  handleSelect(event) {
    console.log('Selected:', event.detail);
  }

  showDetail(row) {
    console.log('Detail:', row);
  }
}

<template>
  <!-- Boolean attributes -->
  <button disabled.bind="isDisabled">Save</button>
  <input readonly.bind="isReadonly" />

  <!-- Style binding -->
  <div style.bind="styleString">Styled div</div>
  <div css="color: ${color}; font-size: ${size}px"></div>

  <!-- Class binding -->
  <div class="btn ${isActive ? 'active' : ''}">Button</div>
  <div class.bind="dynamicClasses"></div>

  <!-- Inner HTML (dangerous — avoid with untrusted content) -->
  <div innerhtml.bind="safeHtml"></div>
</template>

<template>
  <!-- Repeat context -->
  <div repeat.for="item of items">
    <span>${$index}</span>
    <span>${$first ? 'First' : ''}</span>
    <span>${$last ? 'Last' : ''}</span>
    <span>${$even ? 'Even' : 'Odd'}</span>
    <span>${$odd ? 'Odd' : 'Even'}</span>
    <span>${$parent.someProperty}</span>
  </div>

  <!-- Delegate event context -->
  <button click.delegate="handleClick($event, item)">Click</button>
</template>

<template>
  <!-- Direct method calls -->
  <button click.delegate="getFullName()">Show Name</button>

  <!-- Method binding in interpolation -->
  <p>${formatDate(item.createdAt)}</p>

  <!-- Method binding in attribute -->
  <input value.bind="formatName(user)" />
</template>

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

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

  <!-- One-time with signal for manual update -->
  <div>${message & signal:'refresh'}</div>
</template>