ZoolWay/app.html

## app.html
<template>
  <h1>${message}</h1>
  <ul>
    <li class="entry" repeat.for="item of list">item: ${item}</li>
  </ul>
  <div>
    <button click.trigger="addItem()">Add Bad</button>
    <button click.trigger="addItemQueued()">Add Queued</button>
    <button click.trigger="clearLength()">Clear Length</button>
    <button click.trigger="clearSplice()">Clear Splice</button>
    <button click.trigger="clearReplace()">Clear Replace</button>
  </div>
</template>

## app.js
import { inject, TaskQueue } from 'aurelia-framework';

@inject(TaskQueue)
export class App {
  message = 'Hello World!';
  list = undefined;
  taskQueue = undefined;

  constructor(taskQueue) {
    this.list = new Array();
    this.list.push("itm1");
    this.taskQueue = taskQueue;
  }

  addItem() {
    this.list.push("new-item");
    this.list.push("new-item");
    this.list.push("new-item");
    $(".entry").css("border", "2px solid red");
  }

  addItemQueued() {
    this.list.push("new-item, reworking queued");
    this.list.push("new-item, reworking queued");
    this.list.push("new-item, reworking queued");
    this.list.push("new-item, reworking queued");
    this.taskQueue.queueMicroTask(() => {
      $(".entry").css("border", "2px solid green");
    });
  }

  clearLength() {
    this.list.length = 0;
  }

  clearSplice() {
    this.list.splice(0);
  }

  clearReplace() {
    this.list = [];
  }
}

## 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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## tsconfig.json
{
  "version": "1.8.10",
  "compilerOptions": {
    "rootDir": "./",
    "sourceMap": true,
    "target": "es6",
    "module": "amd",
    "declaration": false,
    "noImplicitAny": false,
    "noResolve": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}
	<template>
	<h1>${message}</h1>
	<ul>
	<li class="entry" repeat.for="item of list">item: ${item}</li>
	</ul>
	<div>
	<button click.trigger="addItem()">Add Bad</button>
	<button click.trigger="addItemQueued()">Add Queued</button>
	<button click.trigger="clearLength()">Clear Length</button>
	<button click.trigger="clearSplice()">Clear Splice</button>
	<button click.trigger="clearReplace()">Clear Replace</button>
	</div>
	</template>
	import { inject, TaskQueue } from 'aurelia-framework';

	@inject(TaskQueue)
	export class App {
	message = 'Hello World!';
	list = undefined;
	taskQueue = undefined;

	constructor(taskQueue) {
	this.list = new Array();
	this.list.push("itm1");
	this.taskQueue = taskQueue;
	}

	addItem() {
	this.list.push("new-item");
	this.list.push("new-item");
	this.list.push("new-item");
	$(".entry").css("border", "2px solid red");
	}

	addItemQueued() {
	this.list.push("new-item, reworking queued");
	this.list.push("new-item, reworking queued");
	this.list.push("new-item, reworking queued");
	this.list.push("new-item, reworking queued");
	this.taskQueue.queueMicroTask(() => {
	$(".entry").css("border", "2px solid green");
	});
	}

	clearLength() {
	this.list.length = 0;
	}

	clearSplice() {
	this.list.splice(0);
	}

	clearReplace() {
	this.list = [];
	}
	}
	<!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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	{
	"version": "1.8.10",
	"compilerOptions": {
	"rootDir": "./",
	"sourceMap": true,
	"target": "es6",
	"module": "amd",
	"declaration": false,
	"noImplicitAny": false,
	"noResolve": true,
	"removeComments": true,
	"noLib": false,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true
	}
	}