Deterus
1/5/2017 - 6:55 PM

http://stackoverflow.com/questions/40976125/linking-directly-to-both-parentchild-views-controllers-from-the-main-navigation

http://stackoverflow.com/questions/40976125/linking-directly-to-both-parentchild-views-controllers-from-the-main-navigation

shared-state.js
content_copyfile_download
export class SharedState {
  fromdate = '';
  todate = '';
  language = 'English';
}
shared-parent2.js
content_copyfile_download
import {inject, NewInstance} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(NewInstance.of(SharedState)) // <-- this says create a new instance of the SharedState whenever a SharedParent2 instance is created
export class SharedParent2 {
  constructor(state) {
    this.state = state;
  }

  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
        { route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
    ]);

    this.router = router;
  }
}
shared-parent2.html
content_copyfile_download
<template>
  <div class="shared-parent">
    <h1>Shared Parent 2</h1>
  
    <form>
      <label>Language: <input type="text" value.bind="state.language"></label>
      <label>From Date: <input type="date" value.bind="state.fromdate"></label>
      <label>To Date: <input type="date" value.bind="state.todate"></label>
    </form>
    
    <router-view></router-view>
  </div>
</template>
shared-parent.js
content_copyfile_download
import {inject, NewInstance} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(NewInstance.of(SharedState)) // <-- this says create a new instance of the SharedState whenever a SharedParent instance is created
export class SharedParent {
  constructor(state) {
    this.state = state;
  }
  
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
        { route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
    ]);

    this.router = router;
  }
}
shared-parent.html
content_copyfile_download
<template>
  <div class="shared-parent">
    <h1>Shared Parent</h1>
  
    <form>
      <label>Language: <input type="text" value.bind="state.language"></label>
      <label>From Date: <input type="date" value.bind="state.fromdate"></label>
      <label>To Date: <input type="date" value.bind="state.todate"></label>
    </form>
    
    <router-view></router-view>
  </div>
</template>
index.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .shared-parent,
      .shared-parent > form {
        border: 5px solid green;
        padding: 10px;
      }
      .shared-parent > form {
        width: 50%;
      }
      
      .child {
        border: 5px solid blue;
        margin-top: 10px;
        padding: 10px;
      }
    </style>
  </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>
child-b.js
content_copyfile_download
import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildB {
  constructor(state) {
    this.state = state;
  }
}
child-b.html
content_copyfile_download
<template>
  <div class="child">
    <h2>Child B</h2>
    Language: ${state.language}, Dates: ${state.fromdate || '???'} - ${state.todate || '???'}
  </div>
</template>
child-a.js
content_copyfile_download
import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildA {
  constructor(state) {
    this.state = state;
  }
}
child-a.html
content_copyfile_download
<template>
  <div class="child">
    <h2>Child A</h2>
    Language: ${state.language}, Dates: ${state.fromdate || '???'} - ${state.todate || '???'}
  </div>
</template>
app.js
content_copyfile_download
export class App {
  message = 'Hello World!';
  
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'shared-parent'], moduleId: './shared-parent', nav: true, title: 'Shared Parent' },
        { route: 'shared-parent2', moduleId: './shared-parent2', nav: true, title: 'Shared Parent 2' },
    ]);

    this.router = router;
  }
}
app.html
content_copyfile_download
<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>
  <router-view></router-view>
</template>