pjschreifels/app.html

## app.html
<template>
  <require from='./records'></require>
  <require from='./record-form'></require>

  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-xs-12">
        <p class="lead text-muted">${heading}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <record-form></record-form>
      </div>
      <div class="col-sm-8">
        <records></records>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <hr />
      <!-- <pre>
        Selected row:
        ID: ${id}
        Title ${title}
        Date: ${date}
      </pre> -->
    </div>
  </div>
</template>

## app.js
export class App {
  heading = "Aurelia App"
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha256-mIfhv/h3MLq3WSiSlduuZO3saRNzzuf1LK8w3z3l3JY=" crossorigin="anonymous" />
    <style>
      .table-hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body aurelia-app="main">
    <div class="container">
      <div class="row mt-1">
        <div class="col-xs-12">
          <p class="lead text-muted">Loading...</p>
        </div>
      </div>
    </div>

    <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()
    .plugin('aurelia-validation');

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

## record-form.html
<template>
  <form>
    <input type="hidden" id="id" value.bind="id">
    <div class="form-group">
      <label for="title">Title</label>
      <input type="text" class="form-control" id="title" value.bind="session.record.title" placeholder="Title">
    </div>
    <div class="form-group">
      <label for="date">Date</label>
      <input type="text" class="form-control" id="date" value.bind="session.record.date" placeholder="Date">
    </div>
    <button type="submit" class="btn btn-outline-primary">Update</button>
  </form>
</template>

## record-form.js
import {bindable} from 'aurelia-framework';
import {Session} from './session';

export class RecordForm {
  static inject = [Session];
  constructor(session) {this.session = session;}
}

## records.html
<template>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of data" click.trigger="editItem(row)">
        <th scope="row">${row.id}</th>
        <td>${row.title}</td>
        <td>${row.date}</td>
      </tr>
    </tbody>
  </table>
  <p class="lead small text-muted">Click a row to edit its details.</p>
</template>

## records.js
import {Session} from './session';

export class Records {
  static inject = [Session];
  constructor(session) {this.session = session}

  data = [
    {id: 1, title: 'First record', date: '10/1/2016'},
    {id: 2, title: 'Second record', date: '10/2/2016'},
    {id: 3, title: 'Third record', date: '10/3/2016'},
    {id: 4, title: 'Fourth record', date: '10/4/2016'}
  ];

  editItem(item) {
    this.session.record = item;
  }
}

## session.js
export class Session {
  record = {
    title: 'Default',
    date: 'Default'
  }
}
	<template>
	<require from='./records'></require>
	<require from='./record-form'></require>

	<div class="container-fluid">
	<div class="row mt-1">
	<div class="col-xs-12">
	<p class="lead text-muted">${heading}</p>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-4">
	<record-form></record-form>
	</div>
	<div class="col-sm-8">
	<records></records>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-xs-12">
	<hr />
	<!-- <pre>
	Selected row:
	ID: ${id}
	Title ${title}
	Date: ${date}
	</pre> -->
	</div>
	</div>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha256-mIfhv/h3MLq3WSiSlduuZO3saRNzzuf1LK8w3z3l3JY=" crossorigin="anonymous" />
	<style>
	.table-hover {
	cursor: pointer;
	}
	</style>
	</head>
	<body aurelia-app="main">
	<div class="container">
	<div class="row mt-1">
	<div class="col-xs-12">
	<p class="lead text-muted">Loading...</p>
	</div>
	</div>
	</div>

	<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()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<form>
	<input type="hidden" id="id" value.bind="id">
	<div class="form-group">
	<label for="title">Title</label>
	<input type="text" class="form-control" id="title" value.bind="session.record.title" placeholder="Title">
	</div>
	<div class="form-group">
	<label for="date">Date</label>
	<input type="text" class="form-control" id="date" value.bind="session.record.date" placeholder="Date">
	</div>
	<button type="submit" class="btn btn-outline-primary">Update</button>
	</form>
	</template>
	import {bindable} from 'aurelia-framework';
	import {Session} from './session';

	export class RecordForm {
	static inject = [Session];
	constructor(session) {this.session = session;}
	}
	<template>
	<table class="table table-hover">
	<thead>
	<tr>
	<th>#</th>
	<th>Title</th>
	<th>Date</th>
	</tr>
	</thead>
	<tbody>
	<tr repeat.for="row of data" click.trigger="editItem(row)">
	<th scope="row">${row.id}</th>
	<td>${row.title}</td>
	<td>${row.date}</td>
	</tr>
	</tbody>
	</table>
	<p class="lead small text-muted">Click a row to edit its details.</p>
	</template>
	import {Session} from './session';

	export class Records {
	static inject = [Session];
	constructor(session) {this.session = session}

	data = [
	{id: 1, title: 'First record', date: '10/1/2016'},
	{id: 2, title: 'Second record', date: '10/2/2016'},
	{id: 3, title: 'Third record', date: '10/3/2016'},
	{id: 4, title: 'Fourth record', date: '10/4/2016'}
	];

	editItem(item) {
	this.session.record = item;
	}
	}
	export class Session {
	record = {
	title: 'Default',
	date: 'Default'
	}
	}