ZoolWay

<template>
  <h1>Aurelia Debounce</h1>

  <div ref="areaContainer">
    <h2>Textbox:</h2>  

    <div style="border:1px solid blue; padding: 1em; margin: 1em;">
      <input value.bind="myText & debounce:800" placeholder="type here" />
    </div>

ZoolWay

<template>
  <require from="my-comp"></require>
  
  <h1>Aurelia Reisze</h1>

  <div ref="areaContainer">
    <h2>Component:</h2>  

    <my-comp title="simple"></my-comp>

ZoolWay

<template>
  <require from="my-comp"></require>
  
  <h1>Parents, children and viewmodels</h1>

  <h2>Tree:</h2>  
  <ul>
    <li repeat.for="n of nodes">
      <compose view-model="my-comp" model.bind="n"></compose>
      <ul>

ZoolWay

<template>
  <require from="my-comp"></require>
  
  <h1>Attach/Detach when comp is added/removed by array</h1>

  <h2>Instances:</h2>  
  <div>
    <div repeat.for="c of comps">
      <my-comp value.bind="c"></my-comp>
    </div>

ZoolWay

<template>
  <require from="my-comp"></require>
  
  <h1>Custom Component with boolean attribute binding</h1>

  <h2>Using a string attribute:</h2>  
  <div>
    <my-comp value="true"></my-comp>
    <my-comp value="false"></my-comp>
  </div>

ZoolWay

<template>
  <require from="my-button"></require>
  
  <h1>${message}</h1>
  
  <div>
  <my-button>Button 1</my-button>
  <my-button is-enabled="false">Button 2</my-button>
  <my-button is-enabled.bind="isButton3Enabled">Button 3</my-button>
  <my-button is-enabled.bind="isButton4Enabled">Button 4</my-button>

ZoolWay

<template>
  <p style="border: 1px solid purple; padding: 1rem;">Comp3: ${myVar}</p>
</template>

ZoolWay

<template>
  <require from="./component"></require>
  <require from="./comp2"></require>
  <require from="./comp3!gate"></require>
  <require from="./ext-styles.css!gate" as="scoped"></require>
  <h2>Plugin Loader</h2>
  <hr />
  <div>
    <h3>Component direct</h3>
    <component></component>

ZoolWay

<template>
  <require from="./component"></require>
  <require from="./comp2!gate"></require><!-- Issue 1 -->
  <h2>Plugin Loader</h2>
  <hr />
  <div>
    <h3>Component direct</h3>
    <component></component>
  </div>
  <hr />

ZoolWay

<template>
  <require from="./component"></require>
  <require from="./comp2!gate"></require><!-- Issue 1 -->
  <require from="./styles.css!gate"></require>
  <h2>Plugin Loader</h2>
  <hr />
  <div>
    <h3>Component direct</h3>
    <component></component>
  </div>