AshleyGrant

<template>
  <require from="./my-custom-element"></require>
  
  <my-custom-element name.bind="myName" class="my-class" data-id="1" />
</template> 

AshleyGrant

<template>
  <require from="./select2"></require>
  
  <h1>${message}</h1>
  
  <div select2></div>
</template> 

AshleyGrant

<template>
  <div repeat.for="section of sections" ref="$root" index.bind="$index">
    ${section.name}, $index = ${$index}
    <div repeat.for="row of section.rows">
      ${row.name}
      <div repeat.for="component of row.components">
        ${component} $root.$index = ${$root.index}
      </div>
    </div>
  </div>

AshleyGrant

<template>
  <require from="./has-method"></require>
  
  <div has-method="hello" has-method.ref="theAttribute"></div>
  
  <button click.trigger="callMethod()">Call method</button>
</template>

AshleyGrant

<template>
  <require from="./auth"></require>
  
  <button click.delegate="authorized = !authorized">Toggle Authorized</button>
  <button click.delegate="isDisabled = !isDisabled">Toggle Disabled</button> <br /><br />
  
  Has disabled binding: <input type="text" auth.bind="authorized" disabled.bind="isDisabled" value.bind="value" /> <br /><br />
  
  No disabled binding: <input type="text" auth.bind="authorized" value.bind="value" />
  

AshleyGrant

<template>
  <require from="./test"></require>
  
  <div test="foo: hello world"></div>
</template>

AshleyGrant

import {customAttribute, dynamicOptions, inject, DOM} from 'aurelia-framework';

@customAttribute('my-attribute')
@dynamicOptions
@inject(DOM.Element)
export class MyAttribute {
  
  constructor(element) {
    this.element = element;
  }

AshleyGrant

<template>
  <require from="./my-box"></require>

  <svg width="550" height="550"
      mousedown.trigger="mouseDown($event)"
      mousemove.trigger="mouseMove($event)"
      mouseup.trigger="mouseUp($event)"
      >
    <my-box repeat.for="box of boxes"
      box.bind="box"

AshleyGrant

<template>
  <require from="./my-box"></require>

  <svg width="550" height="550"
      mousedown.trigger="mouseDown($event)"
      mousemove.trigger="mouseMove($event)"
      mouseup.trigger="mouseUp($event)"
      >
    <my-box repeat.for="box of boxes"
      box.bind="box"

AshleyGrant

<template>
  <svg width="550" height="550"
      mousedown.trigger="mouseDown($event)"
      mousemove.trigger="mouseMove($event)"
      mouseup.trigger="mouseUp($event)"
      >
    <rect repeat.for="box of boxes"
      data-id.bind="box.id"
      x.bind="box.x"
      y.bind="box.y"