martonsagi/app.html

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

    <div repeat.for="item of components">
      <label>${item.name}${item.id}</label>: <component id.bind="item.id"></component>
    </div>
    <hr>
    <button class="btn btn-primary" click.delegate="SubmitData({id: 1})">Submit data for Component#1</button>
    <hr>
    <button class="btn btn-success" click.delegate="SubmitData({all: true})">Submit data for All Component</button>
    <hr>
    <button if.bind="removed" class="btn btn-info" click.delegate="AddComponent(2)">Add Component#2</button>
    <button if.bind="!removed" class="btn btn-danger" click.delegate="RemoveComponent(2)">Remove Component#2</button>
</template>

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

@inject(EventAggregator)
export class App {

  components = [
    { id: 1, name: 'Component #' },
    { id: 2, name: 'Component #' },
    { id: 3, name: 'Component #' }
  ];

  removed = false;

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

  SubmitData(opts) {
    this.eventAggregator.publish('component:save', opts);
  }

  RemoveComponent(id) {
    let item = this.components.find(i => i.id === id);
    if (item) {
      let index = this.components.indexOf(item);
      this.components.splice(index, 1);
    }

    this.removed = true;
  }

  AddComponent(id) {
    this.components.push({id: id, name: 'Component #'});
    this.removed = false;
  }
}

## component.html
<template>

  <input type="text" value.bind="object.Name" />

</template>

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

@inject(EventAggregator)
export class Component {

  @bindable
  id;

  object = {};

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

  bind() {
    this.object = {
      "Name": `My name ${this.id}`,
      "Age": 21
    };

    console.log(`component ADDED: #${this.id}`);

    this.subscriber = this.eventAggregator.subscribe('component:save', data => {

      if (data.id === this.id || data.all === true) {
        this.SubmitObjectToDatabase();
        console.log(`component:save SAVED: #${this.id}`, this.object.Name);
      } else {
        console.log(`component:save PASSED: #${this.id}`);
      }

    });
  }

  SubmitObjectToDatabase() {
    console.log(`SubmitObjectToDatabase has been called: #${this.id}`);
  }

  detached() {
    // cleanup
    this.subscriber.dispose();
    console.log(`component REMOVED: #${this.id}`);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <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>
	<require from="component"></require>

	<div repeat.for="item of components">
	<label>${item.name}${item.id}</label>: <component id.bind="item.id"></component>
	</div>
	<hr>
	<button class="btn btn-primary" click.delegate="SubmitData({id: 1})">Submit data for Component#1</button>
	<hr>
	<button class="btn btn-success" click.delegate="SubmitData({all: true})">Submit data for All Component</button>
	<hr>
	<button if.bind="removed" class="btn btn-info" click.delegate="AddComponent(2)">Add Component#2</button>
	<button if.bind="!removed" class="btn btn-danger" click.delegate="RemoveComponent(2)">Remove Component#2</button>
	</template>
	import { inject } from "aurelia-framework";
	import { EventAggregator } from 'aurelia-event-aggregator';

	@inject(EventAggregator)
	export class App {

	components = [
	{ id: 1, name: 'Component #' },
	{ id: 2, name: 'Component #' },
	{ id: 3, name: 'Component #' }
	];

	removed = false;

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

	SubmitData(opts) {
	this.eventAggregator.publish('component:save', opts);
	}

	RemoveComponent(id) {
	let item = this.components.find(i => i.id === id);
	if (item) {
	let index = this.components.indexOf(item);
	this.components.splice(index, 1);
	}

	this.removed = true;
	}

	AddComponent(id) {
	this.components.push({id: id, name: 'Component #'});
	this.removed = false;
	}
	}
	<template>

	<input type="text" value.bind="object.Name" />

	</template>
	import { inject, bindable } from 'aurelia-framework';
	import { EventAggregator } from 'aurelia-event-aggregator';

	@inject(EventAggregator)
	export class Component {

	@bindable
	id;

	object = {};

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

	bind() {
	this.object = {
	"Name": `My name ${this.id}`,
	"Age": 21
	};

	console.log(`component ADDED: #${this.id}`);

	this.subscriber = this.eventAggregator.subscribe('component:save', data => {

	if (data.id === this.id \|\| data.all === true) {
	this.SubmitObjectToDatabase();
	console.log(`component:save SAVED: #${this.id}`, this.object.Name);
	} else {
	console.log(`component:save PASSED: #${this.id}`);
	}

	});
	}

	SubmitObjectToDatabase() {
	console.log(`SubmitObjectToDatabase has been called: #${this.id}`);
	}

	detached() {
	// cleanup
	this.subscriber.dispose();
	console.log(`component REMOVED: #${this.id}`);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

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