lstarky

<template>

  <require from="./modal-form"></require>
  <h1>Aurelia Custom Element with Modal Form</h1>
  <button class="btn btn-success btn-large" click.delegate="openModal()">New Item</button>
  <button class="btn btn-primary btn-large" click.delegate="openModal(1)">Edit Item</button>
  <div class="form-group">
    <label for="my-input">#my-input</label>
    <input type="text" class="form-control" id="my-input">
  </div>

lstarky

<template>
  <h1>Hello, ${fname}!</h1>
</template>

lstarky

<template>

  <h1>Hello, ${fname}!</h1>
  <ul>
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
  </ul>
  
  <router-view></router-view>

lstarky

<template>
  <h1>Hello, ${fname}!</h1>
  <hr>
  <label repeat.for="option of options">
    <input type="radio" name="opta" model.bind="option" checked.bind="$parent.selectedOption">
    ${option.value}<br>
  </label>
  Selected: <strong>${selectedOption.id} (${selectedOption.value})</strong>
</template>

lstarky

<template>
  <div class="container">
    <h1>Hello, ${fname}!</h1>
    <form>
      <div class="form-group">
        <label class="control-label">Name input (no change event on input):</label>
        <input type="text" class="form-control" value.bind="fname">
      </div>
      <div class="form-group">
        <label class="control-label">Name input (change and keyup events on input):</label>

lstarky

<template>
  <require from="./registration-form"></require>
  
  <registration-form></registration-form>
</template>

lstarky

<template>
  <div class="container-fluid">
    <h1>Hello, ${fname}!</h1>
  </div>
</template>

lstarky

<template>
  <div class="container-fluid">
    <h1>Table Method</h1>
    <table width="100%">
      <td>
        <div repeat.for="field of myData" if.bind="field.order % 2">
          <p><b>${field.Key}:</b> ${field.value}</p>
        </div>
      </td>
      <td>

lstarky

<template>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li><a href="#/home">Home</a></li>
        <li><a href="#/square">Square</a></li>
        <li><a href="#/circle">Circle</a></li>
      </ul>
    </div>
  </nav>

lstarky

<template>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li><a href="#/home">Home</a></li>
        <li><a href="#/square">Square</a></li>
        <li><a href="#/circle">Circle</a></li>
      </ul>
    </div>
  </nav>