arjanvanderleden/app.html

## app.html
<template>
  <select value.bind="currentLanguage">
    <option repeat.for="language of languages" value.bind="language">${language}</option>
  </select> (${currentLanguage})

  <item-view repeat.for="item of items" item.bind="item" language.bind="currentLanguage" click.delegate="setCurrentItem(item)" other-collection.bind="otherCollection"></item-view>
  <hr/>
  <item-view if.bind="currentItem" item.bind="currentItem" language.two-way="currentLanguage" other-collection.bind="otherCollection"></item-view>
  <hr/>
  <span repeat.for="n of otherCollection">${n}</span>

</template>

## app.js
import {inject} from 'aurelia-dependency-injection';
import {bindable} from 'aurelia-binding';
import {Item} from './item';

export class App {
  items=[
    new Item(1,'one'),
    new Item(2,'two'),
    new Item(3,'three'),
    new Item(4,'four')
    ]
  languages = ['nl','en'];
  otherCollection = null;
  currentLanguage;
  currentItem: Item;

  constructor(){
    this.currentLanguage = this.languages[1];
  }

  setCurrentItem(item){
    this.currentItem = item;
  }

  attached(){
    console.log('setting timeout')
    setTimeout(()=>{
      console.log('timed out for currentItem')
      this.currentItem = this.items[0]

    },1000)
    setTimeout(()=>{
      console.log('timed out for other collection')
      this.otherCollection = [1,2,3,4,5]

    },5000)
  }
}


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

## item-view.html
<template>
  <div>
    <span>${item.number}</span>
    <span>${item.label} (${language})</span>
    <span repeat.for="o of otherCollection">${o}</span>
  </div>
</template>

## item-view.js
//import {inject} from 'aurelia-dependency-injection';
import {bindable} from 'aurelia-framework';

export class ItemView {
  @bindable item : Object;
  @bindable language : string;
  @bindable otherCollection;

  constructor(){
    console.log('constructor')
  }

  bind(x,y){
    console.log('bind');
  }

  attached = function(){
    console.log('attached');
  }

  languageChanged(){
    console.log('languageChanged')
  }

  otherCollectionChanged(){
    console.log('otherCollectionChanged');
  }

  itemChanged = function(){
    console.log('itemChanged')
  }
}

## item.js
export class Item {
  number : number;
  label : string;
  constructor(number : number, label:string){
    this.number = number;
    this.label = label;
  }
}

## main.js
export function configure(aurelia) {
  aurelia.use.standardConfiguration()
    .developmentLogging()
    .globalResources(['./item-view'])

  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<select value.bind="currentLanguage">
	<option repeat.for="language of languages" value.bind="language">${language}</option>
	</select> (${currentLanguage})

	<item-view repeat.for="item of items" item.bind="item" language.bind="currentLanguage" click.delegate="setCurrentItem(item)" other-collection.bind="otherCollection"></item-view>
	<hr/>
	<item-view if.bind="currentItem" item.bind="currentItem" language.two-way="currentLanguage" other-collection.bind="otherCollection"></item-view>
	<hr/>
	<span repeat.for="n of otherCollection">${n}</span>

	</template>
	import {inject} from 'aurelia-dependency-injection';
	import {bindable} from 'aurelia-binding';
	import {Item} from './item';

	export class App {
	items=[
	new Item(1,'one'),
	new Item(2,'two'),
	new Item(3,'three'),
	new Item(4,'four')
	]
	languages = ['nl','en'];
	otherCollection = null;
	currentLanguage;
	currentItem: Item;

	constructor(){
	this.currentLanguage = this.languages[1];
	}

	setCurrentItem(item){
	this.currentItem = item;
	}

	attached(){
	console.log('setting timeout')
	setTimeout(()=>{
	console.log('timed out for currentItem')
	this.currentItem = this.items[0]

	},1000)
	setTimeout(()=>{
	console.log('timed out for other collection')
	this.otherCollection = [1,2,3,4,5]

	},5000)
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main" class="container">
	<h1>Loading...</h1>
	<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/babel.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div>
	<span>${item.number}</span>
	<span>${item.label} (${language})</span>
	<span repeat.for="o of otherCollection">${o}</span>
	</div>
	</template>
	//import {inject} from 'aurelia-dependency-injection';
	import {bindable} from 'aurelia-framework';

	export class ItemView {
	@bindable item : Object;
	@bindable language : string;
	@bindable otherCollection;

	constructor(){
	console.log('constructor')
	}

	bind(x,y){
	console.log('bind');
	}

	attached = function(){
	console.log('attached');
	}

	languageChanged(){
	console.log('languageChanged')
	}

	otherCollectionChanged(){
	console.log('otherCollectionChanged');
	}

	itemChanged = function(){
	console.log('itemChanged')
	}
	}
	export class Item {
	number : number;
	label : string;
	constructor(number : number, label:string){
	this.number = number;
	this.label = label;
	}
	}
	export function configure(aurelia) {
	aurelia.use.standardConfiguration()
	.developmentLogging()
	.globalResources(['./item-view'])

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