ZoolWay/app.html

## app.html
<template>
  <require from="my-comp"></require>

  <h1>Parents, children and viewmodels</h1>

  <h2>Tree:</h2>
  <ul>
    <li repeat.for="n of nodes">
      <compose view-model="my-comp" model.bind="n"></compose>
      <ul>
        <li repeat.for="i of n.items">
          <compose view-model="my-comp" model.bind="i"></compose>
        </li>
      </ul>
    </li>
  </ul>

</template>

## app.js
import { bindable, observable } from 'aurelia-framework'

export class App {

  nodes = this.initNodes();

  initNodes() {
    let c1_1 = { title: 'Node 1.1', value: 17 };
    let n1 = { title: 'Node 1', items: [ c1_1 ]};
    c1_1.parentNodeModel = n1;
    let c2_1 = { title: 'Node 2.1', value: 2 };
    let c2_2 = { title: 'Node 2.2', value: 3 };
    let n2 = { title: 'Node 2', items: [ c2_1, c2_2 ]};
    c2_1.parentNodeModel = n2;
    c2_2.parentNodeModel = n2;
    let nodes = [ n1, n2 ];
    return nodes;
  }

}

## 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>
      require(['aurelia-bootstrapper']);
    </script>

  </body>
</html>

## my-comp.html
<template>
  <span style="font-family:Lucida Console Regular;">
    title: '${model.title}', ${model.value}&euro; <button if.bind="!hasChildren" click.delegate="inc()">inc</button>
  </span>
</template>

## my-comp.js
import { inject, BindingEngine, Disposable } from 'aurelia-framework'

@inject(BindingEngine)
export class MyComp {
  model = null;
  hasChildren = false;
  childSubs = [];
  bindingEngine = null;

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

  activate(model) {
    this.model = model;
    this.title = model.title;
    this.hasChildren = ((model.items) && (model.items.length) && (model.items.length > 0));
  }

  attached() {
    if (this.hasChildren) {
      for (let c of this.model.items) {
        let sub = this.bindingEngine.propertyObserver(c, 'value').subscribe(() => this.recalcChildrenSum());
        this.childSubs.push(sub);
      }
      console.debug(`'${this.title}'' is monitoring ${this.childSubs.length} child/ren`);
      this.recalcChildrenSum();
    }
  }

  detached() {
    if ((this.childSubs) && (this.childSubs.length > 0)) {
      for (let sub of this.childSubs) {
        sub.dispose();
      }
      this.childSubs = null;
    }
  }

  inc() {
    if (!this.model.value) return; // we do not have a value
    this.model.value += 1;
  }

  recalcChildrenSum() {
    let sum = 0;
    for (let c of this.model.items) {
      if (c.value) {
        sum += c.value;
      }
    }
    this.model.value = sum;
  }

}
	<template>
	<require from="my-comp"></require>

	<h1>Parents, children and viewmodels</h1>

	<h2>Tree:</h2>
	<ul>
	<li repeat.for="n of nodes">
	<compose view-model="my-comp" model.bind="n"></compose>
	<ul>
	<li repeat.for="i of n.items">
	<compose view-model="my-comp" model.bind="i"></compose>
	</li>
	</ul>
	</li>
	</ul>

	</template>
	import { bindable, observable } from 'aurelia-framework'

	export class App {

	nodes = this.initNodes();

	initNodes() {
	let c1_1 = { title: 'Node 1.1', value: 17 };
	let n1 = { title: 'Node 1', items: [ c1_1 ]};
	c1_1.parentNodeModel = n1;
	let c2_1 = { title: 'Node 2.1', value: 2 };
	let c2_2 = { title: 'Node 2.2', value: 3 };
	let n2 = { title: 'Node 2', items: [ c2_1, c2_2 ]};
	c2_1.parentNodeModel = n2;
	c2_2.parentNodeModel = n2;
	let nodes = [ n1, n2 ];
	return nodes;
	}

	}
	<!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>
	require(['aurelia-bootstrapper']);
	</script>

	</body>
	</html>
	<template>
	<span style="font-family:Lucida Console Regular;">
	title: '${model.title}', ${model.value}€ <button if.bind="!hasChildren" click.delegate="inc()">inc</button>
	</span>
	</template>
	import { inject, BindingEngine, Disposable } from 'aurelia-framework'

	@inject(BindingEngine)
	export class MyComp {
	model = null;
	hasChildren = false;
	childSubs = [];
	bindingEngine = null;

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

	activate(model) {
	this.model = model;
	this.title = model.title;
	this.hasChildren = ((model.items) && (model.items.length) && (model.items.length > 0));
	}

	attached() {
	if (this.hasChildren) {
	for (let c of this.model.items) {
	let sub = this.bindingEngine.propertyObserver(c, 'value').subscribe(() => this.recalcChildrenSum());
	this.childSubs.push(sub);
	}
	console.debug(`'${this.title}'' is monitoring ${this.childSubs.length} child/ren`);
	this.recalcChildrenSum();
	}
	}

	detached() {
	if ((this.childSubs) && (this.childSubs.length > 0)) {
	for (let sub of this.childSubs) {
	sub.dispose();
	}
	this.childSubs = null;
	}
	}

	inc() {
	if (!this.model.value) return; // we do not have a value
	this.model.value += 1;
	}

	recalcChildrenSum() {
	let sum = 0;
	for (let c of this.model.items) {
	if (c.value) {
	sum += c.value;
	}
	}
	this.model.value = sum;
	}

	}