jsobell

<template>
  <section>
    <h2>Cascading Selects Example</h2>

    <form role="form" submit.delegate="submit()">

      <div class="form-group">
        <label for="levelOne">Level 1</label>
        <select id="levelOne" name="levelOne" value.bind="levelOne">
          <option value="">Select a level 1 item</option>

jsobell

<template>
  <h1>${message}</h1>
  <a href='#' click.delegate='checkall()'>Check all</a>
  <ul>
    <li repeat.for='c of checked'><input type='checkbox' checked.bind='c.checked'>Checked ${c.value} : ${c.checked} </li>
  </ul>
</template>

jsobell

<template>

	<require from="nav-bar.html"></require>
	<require from="styles.css"></require>
  <require from="panels.css"></require>

	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host">
    <router-view></router-view>

jsobell

<template>
  <ul>
    <li>
      Inspect Div A and Div B in dev tools
      and pay attention to their classes.
    </li>
    <li>
      Click all of the "click me" text and observe Div A and Div B classes change.
    </li>
  </ul>

jsobell

<template>
  <require from="./component"></require>
  
  <button click.delegate="swapArrays()">Swap arrays</button>
  
  <br>
  <component 
    repeat.for="id of componentsProxy"
    id.bind="id"
  ></component>

jsobell

<template>
  <div>Div below (pink border) will become visible if value > 0</div>
  <input type='checkbox' checked.bind='value & debounce:1000'>
  <div>Double click the button when the value (displayed on the button) is '-1' to produce this issue</div>
   <div if.bind='value' style="margin: 20px; border: 1px solid #E69">${value} ${value < 0 ? 'ERROR: Should not stay visible' : ''}</div>
</template>

jsobell

<template>
  <form submit.delegate="submit()">
    <!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

    <div class="form-group">
      <label class="control-label" for="first">First Name</label>
      <input type="text" class="form-control" id="last" placeholder="Last Name"
             value.bind="person.firstName & validate">
    </div>

jsobell

<template>
  
  <require from="hc-ui-tabcontrol"></require>
  
  <button click.trigger='tc.handleClickEvent("TEST")'>TEST</button>
  <button click.trigger='showTC()'>showTC</button>
  
  <ui-tabcontrol controller.ref='tc'>
    <tab-page>
      <tab-heading>Heading1</tab-heading>

jsobell

zXDcv<template>
  <form submit.delegate="submit()" novalidate autocomplete="off">
    <!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

    <div class="form-group">
      <label class="control-label" for="password">Password</label>
      <input type="password" class="form-control" id="password" placeholder="Password"
             value.bind="password & validate"
      >
    </div>

jsobell

<template>
  <div>
  <a href="http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/9" target="top">Documentation</a>
  </div>
  <form submit.delegate="submit()" novalidate autocomplete="off">
    <!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

    <div class="form-group">
      <label class="control-label" for="A">String A</label>
        <input type="text" class="form-control" id="A" value.bind="A & validate">