charlespockert/app.html

## app.html
<template>
  <require from="nav-bar.html"></require>
  <require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>
  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host" style="margin-top:50px">
    <router-view></router-view>
  </div>
</template>

## app.js
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'page1'], name: 'welcome',      moduleId: 'page1',      nav: true, title: 'Welcome' }
    ]);

    this.router = router;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
//import 'bootstrap';

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

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

## my-element.html
<template>
  <div>This is the test element - is "choices" undefined: ${ valueIsUndefined }</div>
  <input value.bind="value"></input>
</template>

## my-element.js
import {bindable, inject} from 'aurelia-framework';
import {BindingEngine} from 'aurelia-binding'; // or from 'aurelia-framework'

@inject(BindingEngine)
export class MyElement {
  @bindable choices = [];
  @bindable value = "";
  subscription;
  bindingEngine;

  constructor(bindingEngine) {
    this.bindingEngine= bindingEngine;
    console.log(this.choices);
  }

  attached() {
    console.log(this.choices);

    if(!this.choices) {
      this.choices = [];
      this.choices.push('aaa');
    }
  }

  choicesChanged(newValue) {
    if(this.subscription) {
      this.subscription.dispose();
    }

    if(newValue) {

      this.subscription = this.bindingEngine.collectionObserver(this.choices)
        .subscribe(this.arrayChanged.bind(this));

    }
  }

  valueChanged(newValue) {
    this.choices.push(newValue);
  }

  arrayChanged(splices) {
    console.log(this.choices);
  }
}

## nav-bar.html
<template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

## page1.html
<template>
  <require from="my-element"></require>
  <section class="au-animate">
    <h2>Test Page</h2>
    <my-element choices.two-way="form.choices"></my-element>
    <button click.delegate="printChoices()">printChoices</button>
  </section>
</template>

## page1.js
export class Page1 {
  form = {};
  printChoices(){
    console.log(this.form.choices);
  }
}

## script.js
console.log('Hello World!');

## styles.css
/* todo: add styles */
	<template>
	<require from="nav-bar.html"></require>
	<require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>
	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host" style="margin-top:50px">
	<router-view></router-view>
	</div>
	</template>
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{ route: ['', 'page1'], name: 'welcome', moduleId: 'page1', nav: true, title: 'Welcome' }
	]);

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	//import 'bootstrap';

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

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div>This is the test element - is "choices" undefined: ${ valueIsUndefined }</div>
	<input value.bind="value"></input>
	</template>
	import {bindable, inject} from 'aurelia-framework';
	import {BindingEngine} from 'aurelia-binding'; // or from 'aurelia-framework'

	@inject(BindingEngine)
	export class MyElement {
	@bindable choices = [];
	@bindable value = "";
	subscription;
	bindingEngine;

	constructor(bindingEngine) {
	this.bindingEngine= bindingEngine;
	console.log(this.choices);
	}

	attached() {
	console.log(this.choices);

	if(!this.choices) {
	this.choices = [];
	this.choices.push('aaa');
	}
	}

	choicesChanged(newValue) {
	if(this.subscription) {
	this.subscription.dispose();
	}

	if(newValue) {

	this.subscription = this.bindingEngine.collectionObserver(this.choices)
	.subscribe(this.arrayChanged.bind(this));

	}
	}

	valueChanged(newValue) {
	this.choices.push(newValue);
	}

	arrayChanged(splices) {
	console.log(this.choices);
	}
	}
	<template>
	<require from="my-element"></require>
	<section class="au-animate">
	<h2>Test Page</h2>
	<my-element choices.two-way="form.choices"></my-element>
	<button click.delegate="printChoices()">printChoices</button>
	</section>
	</template>
	export class Page1 {
	form = {};
	printChoices(){
	console.log(this.form.choices);
	}
	}