Vheissu

<template>
  <require from="./auth-attribute"></require>
  
  <h1>Shibby</h1>
  <button disabled.bind="buttonState" click.delegate="handleClick()" auth="disabled.bind: buttonState;">My Button</button>
</template>

Vheissu

<template>
    <router-view></router-view>
</template>

Vheissu

<template>
  <require from="./collapse"></require>
  
<style>
div {
  border: 1px solid #CCC;
}

.au-collapse--show {
    display: block;

Vheissu

<template>
    <compose view.bind="viewStrategy"></compose>
</template>

Vheissu

<template>
    <require from="./styles.css"></require>

    <div class="my-cool-element">
        <div class="au-animate">
            <h1>My element animates</h1>
        </div>
    </div>
</template>

Vheissu

<template>
  <require from="./code-snippet"></require>
  
  <code-snippet model.bind="{name: 'Rob', likes: ['apples', 'oranges', 'bananas', 'pineapples']}">
    <h1>Hello, my name is: ${name}</h1>
    <h2>My favourite fruits are:</h2>
    <ul>
      <li repeat.for="fruit of likes">${fruit}</li>
    </ul>
  </code-snippet>

Vheissu

<template>
  <div wheel.delegate="wheelmove($event)" style="background: teal; border: 2px dotted #333; color: #FFF; font-size: 16px; font-weight: bold; height: 250px; width:500px;">Scroll your mousewheel in here</div>
  <ul if.bind="mouseevents">
    <li repeat.for="mouseevent of mouseevents">x: ${mouseevent.x} y: ${mouseevent.y}</li>
  </ul>
</template>

Vheissu

<template>
  <div mousemove.delegate="mousemove($event)" style="background: teal; border: 2px dotted #333; color: #FFF; font-size: 16px; font-weight: bold; height: 250px; width:500px;">Move mouse in here...</div>
  <ul if.bind="mouseevents">
    <li repeat.for="mouseevent of mouseevents">x: ${mouseevent.x} y: ${mouseevent.y}</li>
  </ul>
</template>

Vheissu

<template>
    <p>Last mouse button press: ${lastMouseButton}</p>
    <a href="#" click.delegate="handleClick($event)">Click me</a>
</template>

Vheissu

<template>
  <p repeat.for="event of events">${event}</p>
</template>