ajayvikas/app.html

## app.html
<template>
  <div>
      <label>id</label>
      <label>rate</label>
      <label>qty</label>
      <span>amt</label>
  </div>
  <div repeat.for="order of orders">
      <label>${order.id}</label>
      <label>${order.rate}</label>
      <label>${order.qty}</label>
      <span>${order.amount}</label>
  </div>
  <button type="button" click.delegate="addOrder()">Add new person</button>
</template>

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

@inject(BindingEngine, TaskQueue)
export class App {
    constructor(bindingEngine, taskQueue) {
        this.bindingEngine = bindingEngine;
        this.taskQueue = taskQueue;
        this.orders = [
            {id: 1, rate: 10, qty: 1, amount: 10},
            {id: 2, rate: 15, qty: 2, amount: 30},
            {id: 3, rate: 20, qty: 3, amount: 60},
        ];
        this.orders.forEach(o => this.bindingEngine.propertyObserver(o, "qty").subscribe((mew, old) => {
            this.qtyChanged(o, mew, old);
        }));
        this.bindingEngine.collectionObserver(this.orders).subscribe((changeRecords: any[]) => {
            changeRecords.forEach(cr => {
                this.orders.slice(cr.index, cr.index + cr.addedCount).forEach(order => {
                    this.bindingEngine.propertyObserver(order, "qty").subscribe((mew, old) => {
                        this.qtyChanged(order, mew, old);
                    });
                });
            });
        });
    }
    addOrder() {
        var newOrder = {id: 4, rate: 25, qty: null};
        this.orders.splice(this.orders.length, 0, newOrder);
        //this.taskQueue.flushMicroTaskQueue();
        newOrder.qty = 4;
    }
    qtyChanged(item, mew, old) {
        if (mew != old) {
            debugger;
            item.amount = item.rate * item.qty;
        }
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        label {
            display: inline-block;
            width: 50px;
        }
    </style>
  </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>
	<div>
	<label>id</label>
	<label>rate</label>
	<label>qty</label>
	<span>amt</label>
	</div>
	<div repeat.for="order of orders">
	<label>${order.id}</label>
	<label>${order.rate}</label>
	<label>${order.qty}</label>
	<span>${order.amount}</label>
	</div>
	<button type="button" click.delegate="addOrder()">Add new person</button>
	</template>
	import {inject, BindingEngine, TaskQueue} from 'aurelia-framework';

	@inject(BindingEngine, TaskQueue)
	export class App {
	constructor(bindingEngine, taskQueue) {
	this.bindingEngine = bindingEngine;
	this.taskQueue = taskQueue;
	this.orders = [
	{id: 1, rate: 10, qty: 1, amount: 10},
	{id: 2, rate: 15, qty: 2, amount: 30},
	{id: 3, rate: 20, qty: 3, amount: 60},
	];
	this.orders.forEach(o => this.bindingEngine.propertyObserver(o, "qty").subscribe((mew, old) => {
	this.qtyChanged(o, mew, old);
	}));
	this.bindingEngine.collectionObserver(this.orders).subscribe((changeRecords: any[]) => {
	changeRecords.forEach(cr => {
	this.orders.slice(cr.index, cr.index + cr.addedCount).forEach(order => {
	this.bindingEngine.propertyObserver(order, "qty").subscribe((mew, old) => {
	this.qtyChanged(order, mew, old);
	});
	});
	});
	});
	}
	addOrder() {
	var newOrder = {id: 4, rate: 25, qty: null};
	this.orders.splice(this.orders.length, 0, newOrder);
	//this.taskQueue.flushMicroTaskQueue();
	newOrder.qty = 4;
	}
	qtyChanged(item, mew, old) {
	if (mew != old) {
	debugger;
	item.amount = item.rate * item.qty;
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	label {
	display: inline-block;
	width: 50px;
	}
	</style>
	</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>