martonsagi/app.html

## app.html
<template>

  <require from="./car-list"></require>
  <div class="container-fluid">
      <h4 class="page-header">Cars: ${cars.length} | Counter: ${counter}</h4>

      <car-list cars.bind="cars"></car-list>
  </div>
</template>

## app.js
import { Car } from './car';

export class App {

  car = {
    color: 'blue',
    gasLevel: 'full',
    passengers: 1
  };

  cars;

  counter = 0;

  constructor() {
    this.cars = [];
  }

  attached() {
    this.increasePassengers();
  }

  increasePassengers() {
    if (this.cars.length < 5)
      this.cars.push(new Car(this.car));

    for (let car of this.cars) {
      this.counter++;
      car.passengers = this.counter;
      car.color = car.passengers % 2 === 0 ? "green": "blue";
      car.gasLevel = car.passengers % 3 === 0 ? "empty": "full";
    }

    setTimeout(() => { this.increasePassengers(); }, 1000);
  }
}

## car-list.html
<template>
  <ul class="list-group">
    <li class="list-group-item" repeat.for="car of cars">
      ${car.description}
    </li>
  </ul>
</template>

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

export class CarList {
  @bindable
  cars;
}

## car.js
import { observable } from 'aurelia-framework';

export class Car {
  @observable
  color;

  @observable
  gasLevel;

  @observable
  passengers;

  constructor(data) {
    let values = data || {},
        fieldNames = Object.getOwnPropertyNames(values);

    for (let field of fieldNames) {
      if (field in this) {
        this[field] = values[field];
      }
    }
  }

  get description() {
    return `A ${this.color} car with ${this.gasLevel} tank and ${this.passengers} passengers`;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  </head>
  <body aurelia-app>
    <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/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>

	<require from="./car-list"></require>
	<div class="container-fluid">
	<h4 class="page-header">Cars: ${cars.length} \| Counter: ${counter}</h4>

	<car-list cars.bind="cars"></car-list>
	</div>
	</template>
	import { Car } from './car';

	export class App {

	car = {
	color: 'blue',
	gasLevel: 'full',
	passengers: 1
	};

	cars;

	counter = 0;

	constructor() {
	this.cars = [];
	}

	attached() {
	this.increasePassengers();
	}

	increasePassengers() {
	if (this.cars.length < 5)
	this.cars.push(new Car(this.car));

	for (let car of this.cars) {
	this.counter++;
	car.passengers = this.counter;
	car.color = car.passengers % 2 === 0 ? "green": "blue";
	car.gasLevel = car.passengers % 3 === 0 ? "empty": "full";
	}

	setTimeout(() => { this.increasePassengers(); }, 1000);
	}
	}
	<template>
	<ul class="list-group">
	<li class="list-group-item" repeat.for="car of cars">
	${car.description}
	</li>
	</ul>
	</template>
	import { bindable } from 'aurelia-framework';

	export class CarList {
	@bindable
	cars;
	}
	import { observable } from 'aurelia-framework';

	export class Car {
	@observable
	color;

	@observable
	gasLevel;

	@observable
	passengers;

	constructor(data) {
	let values = data \|\| {},
	fieldNames = Object.getOwnPropertyNames(values);

	for (let field of fieldNames) {
	if (field in this) {
	this[field] = values[field];
	}
	}
	}

	get description() {
	return `A ${this.color} car with ${this.gasLevel} tank and ${this.passengers} passengers`;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	</head>
	<body aurelia-app>
	<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/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>