zakjan/app.html

## app.html
<template>
  <h1>${message}</h1>

  <div style="display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr)">
    <div>
      <b>String path:</b>
      <br><br>
      <template repeat.for="item of items">
        <compose view-model="./item" model.bind="{item}"></compose>
      </template>
    </div>
    <div>
      <b>Class reference:</b>
      <br><br>
      <template repeat.for="item of items">
        <compose view-model.bind="ItemCustomElement" model.bind="{item}"></compose>
      </template>
    </div>
    <div>
      <b>String path:</b>
      <br><br>
      <template repeat.for="i of items">
        <compose view-model="./item" model.bind="{item: i}"></compose>
      </template>
    </div>
    <div>
      <b>Class reference:</b>
      <br><br>
      <template repeat.for="i of items">
        <compose view-model.bind="ItemCustomElement" model.bind="{item: i}"></compose>
      </template>
    </div>
  </div>
</template>

## app.js
import {ItemCustomElement} from './item';

export class App {
  message = 'Hello World!';
  ItemCustomElement = ItemCustomElement;

  items = new Array(10).fill().map((_, i) => ({text: i}))
}

## 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>

## item.html
<template>
  <span style="margin-right: 5px">
    ${activated ? '✓' : '×'}
  </span>

  ${item.text}
  ${text}
  <br>
</template>

## item.js
import {computedFrom} from "aurelia-framework";

export class ItemCustomElement {
  activate(params) {
    this.item = params.item;
    this.activated = true;
  }

  @computedFrom("item")
  get text() {
    return this.item.text * 2;
  }
}
	<template>
	<h1>${message}</h1>

	<div style="display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr)">
	<div>
	<b>String path:</b>
	<br><br>
	<template repeat.for="item of items">
	<compose view-model="./item" model.bind="{item}"></compose>
	</template>
	</div>
	<div>
	<b>Class reference:</b>
	<br><br>
	<template repeat.for="item of items">
	<compose view-model.bind="ItemCustomElement" model.bind="{item}"></compose>
	</template>
	</div>
	<div>
	<b>String path:</b>
	<br><br>
	<template repeat.for="i of items">
	<compose view-model="./item" model.bind="{item: i}"></compose>
	</template>
	</div>
	<div>
	<b>Class reference:</b>
	<br><br>
	<template repeat.for="i of items">
	<compose view-model.bind="ItemCustomElement" model.bind="{item: i}"></compose>
	</template>
	</div>
	</div>
	</template>
	import {ItemCustomElement} from './item';

	export class App {
	message = 'Hello World!';
	ItemCustomElement = ItemCustomElement;

	items = new Array(10).fill().map((_, i) => ({text: i}))
	}
	<!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>
	<span style="margin-right: 5px">
	${activated ? '✓' : '×'}
	</span>

	${item.text}
	${text}
	<br>
	</template>
	import {computedFrom} from "aurelia-framework";

	export class ItemCustomElement {
	activate(params) {
	this.item = params.item;
	this.activated = true;
	}

	@computedFrom("item")
	get text() {
	return this.item.text * 2;
	}
	}