Reverbe/app.html

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


    <frontpark class="wrap"></frontpark>
    <subpark class="wrap"></subpark>
</template>

## app.js
export class App {

}

## frontpark.html
<template>
  <require from="./park"></require>

  <park items.bind="items"
        func.call="myFunc(a, b)"></park>
</template>

## frontpark.js
import { bindable, inject } from 'aurelia-framework';
import { Msg } from './msg';

export class Frontpark {
    items = [{
      name: 'G'
    },
    {
      name: 'H'
    },
    {
      name: 'I'
    }];

    constructor() {

    }

    myFunc(a, b) {
      console.log(a);
      console.log(b);
    }
}

## 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.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
      registration-form {
        display: block;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
      }

      .item {
        display: inline-block;
        border: 2px solid gray;
        background-color: red;
        color: white;
        margin-right: 5px;
        padding: 2px 10px;
      }

      .wrap {
        margin-bottom: 20px;
        display: block;
      }
    </style>
  </head>
  <body aurelia-app="main">
    <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>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}

## msg.js
export class Msg {
    data = '';

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

## park.html
<template>
    <div repeat.for="item of items" class="item" click.delegate="onClick($event, item)">
      ${item.name}
    </div>
</template>

## park.js
import { bindable, inject } from 'aurelia-framework';
import { Msg } from './msg';

export class Park {
  @bindable items = [];
  @bindable func;

  constructor() {

  }

  onClick(evt, itm) {
      console.log('root');
      this.func && this.func({
        a: evt,
        b: itm.name
      });
  }
}

## subpark.html
<template>
  <require from="./park"></require>

  <park items.bind="items"
        func.call="myFunc(a,b)"></park>
</template>

## subpark.js
import { bindable, inject } from 'aurelia-framework';
import { Msg } from './msg';

export class Subpark {
    items = [{
      name: 'A'
    },
    {
      name: 'B'
    },
    {
      name: 'C'
    }];

    constructor () {

    }

    myFunc(a, b) {
      console.log(a);
      console.log(b);
    }
}
	<template>
	<require from="./subpark"></require>
	<require from="./frontpark"></require>


	<frontpark class="wrap"></frontpark>
	<subpark class="wrap"></subpark>
	</template>
	<template>
	<require from="./park"></require>

	<park items.bind="items"
	func.call="myFunc(a, b)"></park>
	</template>
	import { bindable, inject } from 'aurelia-framework';
	import { Msg } from './msg';

	export class Frontpark {
	items = [{
	name: 'G'
	},
	{
	name: 'H'
	},
	{
	name: 'I'
	}];

	constructor() {

	}

	myFunc(a, b) {
	console.log(a);
	console.log(b);
	}
	}
	<!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.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<style>
	registration-form {
	display: block;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	}

	.item {
	display: inline-block;
	border: 2px solid gray;
	background-color: red;
	color: white;
	margin-right: 5px;
	padding: 2px 10px;
	}

	.wrap {
	margin-bottom: 20px;
	display: block;
	}
	</style>
	</head>
	<body aurelia-app="main">
	<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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	export class Msg {
	data = '';

	constructor(data) {
	this.data = data;
	}
	}
	<template>
	<div repeat.for="item of items" class="item" click.delegate="onClick($event, item)">
	${item.name}
	</div>
	</template>
	import { bindable, inject } from 'aurelia-framework';
	import { Msg } from './msg';

	export class Park {
	@bindable items = [];
	@bindable func;

	constructor() {

	}

	onClick(evt, itm) {
	console.log('root');
	this.func && this.func({
	a: evt,
	b: itm.name
	});
	}
	}
	import { bindable, inject } from 'aurelia-framework';
	import { Msg } from './msg';

	export class Subpark {
	items = [{
	name: 'A'
	},
	{
	name: 'B'
	},
	{
	name: 'C'
	}];

	constructor () {

	}

	myFunc(a, b) {
	console.log(a);
	console.log(b);
	}
	}