swalters

<template>
  <require from="./elem1"></require>
  <require from="./elem2"></require>
  
  <elem1 view-model.ref="elem1">
    <h3>inside Elem1</h3>
     <!-- don't process elem2 until Elem1 attached -->
    <div if.bind="elem1.ready">
       <elem2>
       </elem2>

swalters

<template>
  <require from="myelem"></require>
  
  <myelem name.bind="'outer'">
    <h3>inside myelem</h3>
    <myelem name.bind="'inner'">
      <h4>inside inside ... </h4>
    </myelem>
  </myelem>
</template>

swalters

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Container, inject } from 'aurelia-dependency-injection';
import { Web } from './hosts/web';
import { DesignProcessor } from './designs/design-processor';
let AureliaUX = class AureliaUX {

swalters

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Container, inject } from 'aurelia-dependency-injection';
import { Web } from './hosts/web';
import { DesignProcessor } from './designs/design-processor';
let AureliaUX = class AureliaUX {

swalters

<template>
    <require from="./comp1"></require>
    <button click.delegate="toggleComp1()">Toggle Comp1</button>
    <div if.bind="showComp1">
      <comp1></comp1>
    </div>
</template>

swalters

import {inject, customAttribute, TaskQueue} from 'aurelia-framework'

@customAttribute('auto-focus')
@inject(Element,TaskQueue)

export class AutoFocus {
    constructor(private element:Element, private taskQueue:TaskQueue) {

    }

swalters

<template>
  <require from='./parentComponent'></require>
  <require from='./childComponent'></require>
  
  <p>Should log a count of child components</p>
  
  <parent-component>
    <child-component>one</child-component>
  </parent-component>
  

swalters

<template>
  <require from='./parentComponent'></require>
  <require from='./childComponent'></require>
  
  <p>Should log a count of child components</p>
  
  <parent-component>
    <child-component>one</child-component>
    <child-component>two</child-component>
  </parent-component>

swalters

<template>
  <div>
    <md-radio>Option1</md-radio>
  </div>
  <div>
    active page: ${activePage}
  </div>
</template>

swalters

<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="first" placeholder="First Name"
             value.bind="firstName & validate">
    </div>