3cp/app.html

## app.html
<template>
  <require from="./person"></require>

  <button click.delegate="addPerson()">Add Customer</button>
  <person repeat.for="person of people" person.bind="person"></person>

</template>

## app.js
import {EventAggregator} from 'aurelia-event-aggregator';

export class App {
  static inject = [EventAggregator];
  people = []

  constructor(ea) {
    this.ea = ea;
  }

  addPerson() {
    this.people = [...this.people, {id: this.people.length, firstname: 'Firstname', lastname: 'Lastname'}]
  }

  attached() {
    this.mutateWatcher = this.ea.subscribe('mutate', mutation => {
      const {id, attrs} = mutation;

      let newList = [];
      this.people.forEach(person => {
        if (person.id === id) {
          newList.push({
            ...person,
            ...attrs
          });
        } else {
          newList.push(person);
        }
      });

      this.people = newList;
    })
  }

  detached() {
    this.mutateWatcher.dispose();
    delete this.mutateWatcher;
  }

}

## 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://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## person.html
<template>
  <div style="border: 1px solid gray">
    firstname: <input value.bind="firstname"> lastname: <input value.bind="lastname">
  </div>
</template>

## person.js
import {bindable} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';


export class Person {
  static inject = [EventAggregator];

  @bindable person;
  @bindable value = 0;

  constructor(ea) {
    this.ea = ea;
    this.updateIfNeeded = this.updateIfNeeded.bind(this);
  }


  bind() {
    console.log('bind '+this.person.id);
    this.firstname = this.person.firstname;
    this.lastname = this.person.lastname;

    this.updator = setInterval(this.updateIfNeeded, 200);
  }

  personChanged(newPerson) {
    this.firstname = newPerson.firstname;
    this.lastname = newPerson.lastname;
  }

  attached() {
    console.log('attached '+this.person.id);
  }

  detached() {
    console.log('detached '+this.person.id);
  }

  unbind() {
    console.log('unbind '+this.person.id);
    if (this.updator) {
      clearInterval(this.updator);
      delete this.updator;
    }
  }

  updateIfNeeded() {
    const {firstname, lastname, person} = this;
    if (!person) return;

    if (firstname !== person.firstname || lastname !== person.lastname) {
      this.ea.publish('mutate', {
        id: person.id,
        attrs: {firstname, lastname}
      });
    }
  }
}
	<template>
	<require from="./person"></require>

	<button click.delegate="addPerson()">Add Customer</button>
	<person repeat.for="person of people" person.bind="person"></person>

	</template>
	import {EventAggregator} from 'aurelia-event-aggregator';

	export class App {
	static inject = [EventAggregator];
	people = []

	constructor(ea) {
	this.ea = ea;
	}

	addPerson() {
	this.people = [...this.people, {id: this.people.length, firstname: 'Firstname', lastname: 'Lastname'}]
	}

	attached() {
	this.mutateWatcher = this.ea.subscribe('mutate', mutation => {
	const {id, attrs} = mutation;

	let newList = [];
	this.people.forEach(person => {
	if (person.id === id) {
	newList.push({
	...person,
	...attrs
	});
	} else {
	newList.push(person);
	}
	});

	this.people = newList;
	})
	}

	detached() {
	this.mutateWatcher.dispose();
	delete this.mutateWatcher;
	}

	}
	<!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://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<div style="border: 1px solid gray">
	firstname: <input value.bind="firstname"> lastname: <input value.bind="lastname">
	</div>
	</template>
	import {bindable} from 'aurelia-framework';
	import {EventAggregator} from 'aurelia-event-aggregator';


	export class Person {
	static inject = [EventAggregator];

	@bindable person;
	@bindable value = 0;

	constructor(ea) {
	this.ea = ea;
	this.updateIfNeeded = this.updateIfNeeded.bind(this);
	}


	bind() {
	console.log('bind '+this.person.id);
	this.firstname = this.person.firstname;
	this.lastname = this.person.lastname;

	this.updator = setInterval(this.updateIfNeeded, 200);
	}

	personChanged(newPerson) {
	this.firstname = newPerson.firstname;
	this.lastname = newPerson.lastname;
	}

	attached() {
	console.log('attached '+this.person.id);
	}

	detached() {
	console.log('detached '+this.person.id);
	}

	unbind() {
	console.log('unbind '+this.person.id);
	if (this.updator) {
	clearInterval(this.updator);
	delete this.updator;
	}
	}

	updateIfNeeded() {
	const {firstname, lastname, person} = this;
	if (!person) return;

	if (firstname !== person.firstname \|\| lastname !== person.lastname) {
	this.ea.publish('mutate', {
	id: person.id,
	attrs: {firstname, lastname}
	});
	}
	}
	}