BruceL33t

import { NodeModel } from './node-model';

let instance = null;

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

  constructor() {
    if(!instance) {

BruceL33t

<template>
  <p>Parent App</p>
  <require from="./child-app"></require>
  
  <child-app main.bind="main1"></child-app>
  <child-app main.bind="main2"></child-app>
</template>

BruceL33t

<template>
  <require from="./grouped-sort"></require>
  <table>
    <template repeat.for="[group, items] of myArray2 | groupedSort">
      <tr>
        <td>
          ${group}
        </td>
      </tr>
      <tr repeat.for="item of items">

BruceL33t

<template>
  <!--<ul>
    <li><a href="#shared-parent/child-a">#shared-parent/child-a</a></li>
    <li><a href="#shared-parent/child-b">#shared-parent/child-b</a></li>
    <li><a href="#shared-parent2/child-a">#shared-parent2/child-a</a></li>
    <li><a href="#shared-parent2/child-b">#shared-parent2/child-b</a></li>
  </ul>-->
  <style>
    .active a { color: red; font-weight: bold; }
  </style>

BruceL33t

<template>
  <router-view layout-view="default.html" layout-view-model="default"></router-view>
</template>

BruceL33t

<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>

BruceL33t

<template>
  <p>The problem with this solution is that the current state is not set correctly for Shared Parent - child a</p>
  <p>This is because of duplicate "route" attributes in the app router.</p>
  <p>But on the positive side - here it does at least work, setting the heading in the parent from the children by DI, which is an issue if you go the "layout view" route instead like this: <a href="https://gist.run/?id=66eeff540a4665694a31482b790bf01e">https://gist.run/?id=66eeff540a4665694a31482b790bf01e</a></a></p>
  <!--<ul>
    <li><a href="#shared-parent/child-a">#shared-parent/child-a</a></li>
    <li><a href="#shared-parent/child-b">#shared-parent/child-b</a></li>
    <li><a href="#shared-parent2/child-a">#shared-parent2/child-a</a></li>
    <li><a href="#shared-parent2/child-b">#shared-parent2/child-b</a></li>
  </ul>-->

BruceL33t

<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>

BruceL33t

<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li >
      <a href="#viewmodel-with-subrouter/shared-parent/child-a">sdsdfsdf</a>
    </li>
  </ul>
  <router-view></router-view>

BruceL33t

<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li >
      <a href="#viewmodel-with-subrouter/shared-parent/child-a">sdsdfsdf</a>
    </li>
  </ul>
  <router-view></router-view>