peinearydevelopment/address.html

## address.html
<template>
  <input type="text" value.bind="address.line1" />
</template>

## address.js
import {bindable} from 'aurelia-framework';

export class Address {
  @bindable address;
}

## app.html
<template>
  <require from="./address"></require>
  <select value.bind="val" if.bind="opts && !val">
    <option repeat.for="opt of opts" model.bind="opt">${opt.firstName}</option>
  </select>
  <div if.bind="!opts || val">
    <span>${val.firstName}</span>
    <button click.delegate="clearVal()" if.bind="val">Clear</button>
  </div>
  <button click.delegate="getOpts()">Get</button>
  <input type="text" value.bind="val.address.line1" />

  <hr />

  <select value.bind="val2" if.bind="opts2 && !val2">
    <option repeat.for="opt of opts2" model.bind="opt">${opt.firstName}</option>
  </select>
  <div if.bind="!opts2 || val2">
    <span>${val2.firstName}</span>
    <button click.delegate="clearVal2()" if.bind="val2">Clear</button>
  </div>
  <button click.delegate="getOpts2()">Get</button>
  <div>${val2.blah}</div>
  <!--<input type="text" value.bind="val2.blah"/>-->

  <hr />

  <select value.bind="val3" if.bind="opts3 && !val3">
    <option repeat.for="opt of opts3" model.bind="opt">${opt.firstName}</option>
  </select>
  <div if.bind="!opts3 || val3">
    <span>${val3.firstName}</span>
    <button click.delegate="clearVal3()" if.bind="val3">Clear</button>
  </div>
  <button click.delegate="getOpts3()">Get</button>
  <address address.bind="val3.address"></div>
  <!--<input type="text" value.bind="val2.blah"/>-->
</template>

## app.js
export class App {
  opts;
  opts2;
  opts3;
  val;
  val2;
  val3;

  getOpts(){
    this.opts = [
      undefined,
      {
        blah: 1,
        firstName: 'foo',
        address: {
          line1: '123 Main St.'
        }
      },
      {
        blah: 2,
        firstName: 'bar',
        address: {
          line1: '456 Other Wy.'
        }
      }
    ];
  }

  getOpts2(){
    this.opts2 = [
      undefined,
      {
        blah: 1,
        firstName: 'foo',
        address: {
          line1: '123 Main St.'
        }
      },
      {
        blah: 2,
        firstName: 'bar',
        address: {
          line1: '456 Other Wy.'
        }
      }
    ];
  }

  getOpts3(){
    this.opts3 = [
      undefined,
      {
        blah: 1,
        firstName: 'foo',
        address: {
          line1: '123 Main St.'
        }
      },
      {
        blah: 2,
        firstName: 'bar',
        address: {
          line1: '456 Other Wy.'
        }
      }
    ];
  }

  clearVal(){
    this.val = null;
  }

  clearVal2(){
    this.val2 = null;
  }

  clearVal3(){
    this.val3 = null;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<input type="text" value.bind="address.line1" />
	</template>
	import {bindable} from 'aurelia-framework';

	export class Address {
	@bindable address;
	}
	<template>
	<require from="./address"></require>
	<select value.bind="val" if.bind="opts && !val">
	<option repeat.for="opt of opts" model.bind="opt">${opt.firstName}</option>
	</select>
	<div if.bind="!opts \|\| val">
	<span>${val.firstName}</span>
	<button click.delegate="clearVal()" if.bind="val">Clear</button>
	</div>
	<button click.delegate="getOpts()">Get</button>
	<input type="text" value.bind="val.address.line1" />

	<hr />

	<select value.bind="val2" if.bind="opts2 && !val2">
	<option repeat.for="opt of opts2" model.bind="opt">${opt.firstName}</option>
	</select>
	<div if.bind="!opts2 \|\| val2">
	<span>${val2.firstName}</span>
	<button click.delegate="clearVal2()" if.bind="val2">Clear</button>
	</div>
	<button click.delegate="getOpts2()">Get</button>
	<div>${val2.blah}</div>
	<!--<input type="text" value.bind="val2.blah"/>-->

	<hr />

	<select value.bind="val3" if.bind="opts3 && !val3">
	<option repeat.for="opt of opts3" model.bind="opt">${opt.firstName}</option>
	</select>
	<div if.bind="!opts3 \|\| val3">
	<span>${val3.firstName}</span>
	<button click.delegate="clearVal3()" if.bind="val3">Clear</button>
	</div>
	<button click.delegate="getOpts3()">Get</button>
	<address address.bind="val3.address"></div>
	<!--<input type="text" value.bind="val2.blah"/>-->
	</template>
	export class App {
	opts;
	opts2;
	opts3;
	val;
	val2;
	val3;

	getOpts(){
	this.opts = [
	undefined,
	{
	blah: 1,
	firstName: 'foo',
	address: {
	line1: '123 Main St.'
	}
	},
	{
	blah: 2,
	firstName: 'bar',
	address: {
	line1: '456 Other Wy.'
	}
	}
	];
	}

	getOpts2(){
	this.opts2 = [
	undefined,
	{
	blah: 1,
	firstName: 'foo',
	address: {
	line1: '123 Main St.'
	}
	},
	{
	blah: 2,
	firstName: 'bar',
	address: {
	line1: '456 Other Wy.'
	}
	}
	];
	}

	getOpts3(){
	this.opts3 = [
	undefined,
	{
	blah: 1,
	firstName: 'foo',
	address: {
	line1: '123 Main St.'
	}
	},
	{
	blah: 2,
	firstName: 'bar',
	address: {
	line1: '456 Other Wy.'
	}
	}
	];
	}

	clearVal(){
	this.val = null;
	}

	clearVal2(){
	this.val2 = null;
	}

	clearVal3(){
	this.val3 = null;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}