stoffeastrom/app.html

## app.html
<template>
  <require from="async"></require>
  <h1>${message}</h1>
  <async></async>
</template>

## app.js
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class App {
  message = 'Hello World!';

}

## async.html
<template>
  <ul>
    <li repeat.for="user of users">
      ${user.login}
    </li>
</ul>
</template>

## async.js
import { HttpClient } from 'aurelia-fetch-client';
import { inject, customElement, CompositionTransaction } from 'aurelia-framework';

@customElement('async')
@inject(HttpClient, CompositionTransaction)
export class AsyncUsers {
    static inject = [HttpClient, CompositionTransaction];
    constructor(http, compositionTransaction) {
        this.http = http;

        this.compositionTransaction = compositionTransaction;
        this.compositionTransactionNotifier = null;
    }

    bind() {
        // enlist
        console.log('enlist');
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        // retrieve the data
        this.http.fetch('https://api.github.com/users')
            .then(response => response.json())
            .then(users => {
                console.log('done');
                this.users = users; // store locally

                // done loading data, allow the attached() hook to fire
                this.compositionTransactionNotifier.done();

                return users;
            });
    }

    // fires only after `compositionTransactionNotifier.done()` is called
    attached() {
        // update the DOM here, e.g. draw a chart, etc
        console.log('attached', this.users);
    }
}

## 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>
      require.config({
        paths: {
          "aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
        }
      })
    </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="async"></require>
	<h1>${message}</h1>
	<async></async>
	</template>
	import {inject} from 'aurelia-framework';
	import {HttpClient} from 'aurelia-fetch-client';

	@inject(HttpClient)
	export class App {
	message = 'Hello World!';

	}
	<template>
	<ul>
	<li repeat.for="user of users">
	${user.login}
	</li>
	</ul>
	</template>
	import { HttpClient } from 'aurelia-fetch-client';
	import { inject, customElement, CompositionTransaction } from 'aurelia-framework';

	@customElement('async')
	@inject(HttpClient, CompositionTransaction)
	export class AsyncUsers {
	static inject = [HttpClient, CompositionTransaction];
	constructor(http, compositionTransaction) {
	this.http = http;

	this.compositionTransaction = compositionTransaction;
	this.compositionTransactionNotifier = null;
	}

	bind() {
	// enlist
	console.log('enlist');
	this.compositionTransactionNotifier = this.compositionTransaction.enlist();

	// retrieve the data
	this.http.fetch('https://api.github.com/users')
	.then(response => response.json())
	.then(users => {
	console.log('done');
	this.users = users; // store locally

	// done loading data, allow the attached() hook to fire
	this.compositionTransactionNotifier.done();

	return users;
	});
	}

	// fires only after `compositionTransactionNotifier.done()` is called
	attached() {
	// update the DOM here, e.g. draw a chart, etc
	console.log('attached', this.users);
	}
	}
	<!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>
	require.config({
	paths: {
	"aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
	}
	})
	</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>