BruceL33t/app-state.js

## app-state.js
import { NodeModel } from './node-model';

let instance = null;

export default class AppState {
  nodes = [];
  visibleNodes = [];

  constructor() {
    if(!instance) {
      this.nodes = [
        new NodeModel("node1", []),
        new NodeModel("node2", []),
        new NodeModel("node3", [])
      ];
      instance = this;
    }

    return instance;
  }

  toggleNode(nodeName) {

    let index = this.visibleNodes.indexOf(nodeName);
    if (index > -1) {
      this.visibleNodes.splice(index, 1);
    } else {
      this.visibleNodes.push(nodeName);
    }
    alert(JSON.stringify(this.visibleNodes))
  }

  isNodeVisible(nodeName) {
    let res = false;
    let index = this.visibleNodes.indexOf(nodeName);
    if (index > -1) {
      res = true;
    }
    return res;
  }
}

## app.html
<template>
  <div id="main">
    <template repeat.for="node of appStateService.nodes">
      <span if.bind="node.hasChildren()">${node.name}</span>
    	<span if.bind="!node.hasChildren()">
    		<a href="#" click.trigger="appStateService.toggleNode(node.name)">${node.name}</a>
		  </span>
    </template>
  </div>
  <div id="stuff-to-show-if-node-link-is-clicked-setting-node-to-visible">
    <template repeat.for="node of appStateService.nodes">
        <!-- the problem seems to be && appStateService.isNodeVisible(node.name) -->
        <div if.bind="!node.hasChildren() && appStateService.isNodeVisible(node.name)">
          <div class="window-content">
            <iframe src="">${node.name}: in non-example, fetch from node.url</iframe>
          </div>
        </div>
      </template>
  </div>
</template>

## app.js
import { inject, bindable, BindingEngine } from 'aurelia-framework';
import AppStateService from './app-state';

@inject(AppStateService, BindingEngine)

export class App {
  @bindable appStateService;

  constructor(appStateService, bindingEngine) {
    this.appStateService = appStateService;

    // subscribe
    let subscription = bindingEngine.collectionObserver(this.appStateService.visibleNodes)
      .subscribe(splices => this.appStateChanged(splices)); //console.log(splices));

    // unsubscribe
    //subscription.dispose();
  }

  appStateChanged(splices) {
    this.appStateService = this.appStateService;
    //console.log(this.appStateService.visibleNodes);
  }
}

## 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://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>

## node-model.js
export class NodeModel {
  constructor(name, children) {
    this.name = name;
    this.children = children || [];
    this.visible = true;
  }

  hasChildren() {
    return this.children.length > 0;
  }
}
	import { NodeModel } from './node-model';

	let instance = null;

	export default class AppState {
	nodes = [];
	visibleNodes = [];

	constructor() {
	if(!instance) {
	this.nodes = [
	new NodeModel("node1", []),
	new NodeModel("node2", []),
	new NodeModel("node3", [])
	];
	instance = this;
	}

	return instance;
	}

	toggleNode(nodeName) {

	let index = this.visibleNodes.indexOf(nodeName);
	if (index > -1) {
	this.visibleNodes.splice(index, 1);
	} else {
	this.visibleNodes.push(nodeName);
	}
	alert(JSON.stringify(this.visibleNodes))
	}

	isNodeVisible(nodeName) {
	let res = false;
	let index = this.visibleNodes.indexOf(nodeName);
	if (index > -1) {
	res = true;
	}
	return res;
	}
	}
	<template>
	<div id="main">
	<template repeat.for="node of appStateService.nodes">
	<span if.bind="node.hasChildren()">${node.name}</span>
	<span if.bind="!node.hasChildren()">
	<a href="#" click.trigger="appStateService.toggleNode(node.name)">${node.name}</a>
	</span>
	</template>
	</div>
	<div id="stuff-to-show-if-node-link-is-clicked-setting-node-to-visible">
	<template repeat.for="node of appStateService.nodes">
	<!-- the problem seems to be && appStateService.isNodeVisible(node.name) -->
	<div if.bind="!node.hasChildren() && appStateService.isNodeVisible(node.name)">
	<div class="window-content">
	<iframe src="">${node.name}: in non-example, fetch from node.url</iframe>
	</div>
	</div>
	</template>
	</div>
	</template>
	import { inject, bindable, BindingEngine } from 'aurelia-framework';
	import AppStateService from './app-state';

	@inject(AppStateService, BindingEngine)

	export class App {
	@bindable appStateService;

	constructor(appStateService, bindingEngine) {
	this.appStateService = appStateService;

	// subscribe
	let subscription = bindingEngine.collectionObserver(this.appStateService.visibleNodes)
	.subscribe(splices => this.appStateChanged(splices)); //console.log(splices));

	// unsubscribe
	//subscription.dispose();
	}

	appStateChanged(splices) {
	this.appStateService = this.appStateService;
	//console.log(this.appStateService.visibleNodes);
	}
	}
	<!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://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>
	export class NodeModel {
	constructor(name, children) {
	this.name = name;
	this.children = children \|\| [];
	this.visible = true;
	}

	hasChildren() {
	return this.children.length > 0;
	}
	}