djedi/app.html

## app.html
<template>
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>Title</th>
        <th>Updated</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of data">
        <td>${row.id}</td>
        <td>${row.title}</td>
        <td>${row.updated}</td>
        <td>${row.status}</td>
      </tr>
    </tbody>
  </table>
</template>

## app.js
export class App {
  data = [];

  constructor() {
    this.data.push(new Row(1));
    this.data.push(new Row(2, 'Test'));
    this.data.push(new Row(3, 'Foo'));
    this.data.push(new Row(4, 'Bar'));
  }

  attached() {
    this.interval = setInterval(() => {
      const max = this.data.length - 1;
      const min = 0;
      const randomIndex = Math.floor(Math.random() * (max - min + 1)) + min;
      this.data[randomIndex].status = 'Working';
      this.data[randomIndex].updated = new Date();
    }, 2000);
  }

  detached() {
    cancelInterval(this.interval);
  }
}

class Row {
  constructor(id, title, created, updated, status) {
    this.id = id;
    this.title = title || 'No title';
    this.created = new Date();
    this.updated = new Date();
    this.status = status || 'N/A';
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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>
	<table>
	<thead>
	<tr>
	<th>id</th>
	<th>Title</th>
	<th>Updated</th>
	<th>Status</th>
	</tr>
	</thead>
	<tbody>
	<tr repeat.for="row of data">
	<td>${row.id}</td>
	<td>${row.title}</td>
	<td>${row.updated}</td>
	<td>${row.status}</td>
	</tr>
	</tbody>
	</table>
	</template>
	export class App {
	data = [];

	constructor() {
	this.data.push(new Row(1));
	this.data.push(new Row(2, 'Test'));
	this.data.push(new Row(3, 'Foo'));
	this.data.push(new Row(4, 'Bar'));
	}

	attached() {
	this.interval = setInterval(() => {
	const max = this.data.length - 1;
	const min = 0;
	const randomIndex = Math.floor(Math.random() * (max - min + 1)) + min;
	this.data[randomIndex].status = 'Working';
	this.data[randomIndex].updated = new Date();
	}, 2000);
	}

	detached() {
	cancelInterval(this.interval);
	}
	}

	class Row {
	constructor(id, title, created, updated, status) {
	this.id = id;
	this.title = title \|\| 'No title';
	this.created = new Date();
	this.updated = new Date();
	this.status = status \|\| 'N/A';
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</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>