AshleyGrant

<template>
  <require from='./card.html'></require>
  <require from='./card-with-slot.html'></require>
  <style>
    b { font-weight: bold; }
    label { display: block; }
  </style>
  <div ref="myDiv"
    msg.bind='message'
    fun-message.bind='myDiv.msg | fun'

AshleyGrant

<template>
  <require from="stringify"></require>
  <h1>${message}</h1>
  
  <div repeat.for="i of arr">
    i = ${i}
    <br/>
    $parent.message = ${$parent.message}
    <br/>
    $parent.someVar = ${$parent.someVar}

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>
  <h1>${message}</h1>
</template>

AshleyGrant

<template>
  <input type="text" value.one-way="firstName" />
  <input type="text" value.one-time="lastName" />
  ${fullName}
  
  <br /><button click.trigger="updateValues()">Update in VM</button>
</template>

AshleyGrant

<template>
  <label>Two-Way Bound<input type="text" value.two-way="firstName" /></label><br />
  <label>One-Way Bound<input type="text" value.one-way="firstName" /></label><br />
  <label>One-Time Bound<input type="text" value.one-time="firstName" /></label><br />
  firstName: ${firstName}
</template>

AshleyGrant

<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>

AshleyGrant

<template>
  <form role="form" class="form-horizontal" with.bind="user">
    <div class="form-group">
      <label class="col-sm-2 control-label">First Name</label>
      <div class="col-sm-3">
        <input value.bind="firstName & validate" type="text" placeholder="first name" class="form-control">
      </div>
    </div>

    <div class="form-group">

AshleyGrant

import {ValidateResult} from 'aurelia-validation';

export class AjvValidator {
  cache = new Map;
  ajv = new Ajv({ v5: true, allErrors: true, format: 'full' });

  validateObject(object) {
    this.parseSchema(object);
    let schemaId = this._schemaId(object);
    if (!this.cache.has(schemaId)) {

AshleyGrant

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>
          Open API Designer
        </span>
      </a>