javascript - Linking directly to both parent+child views/controllers from the main navigation menu

Question

Consider this example:

The main router is located in

app.js

• someparent/childroute1
• someparent/childroute2
• route3

"someparent" is the "base controller and view". It has some reusable html markup in the view, custom elements and bindings which is to be shared by all its "child views and controllers". The child views and controllers will access these.

Inside "someparent.html" there's (besides the shared markup) also a <router-view> tag, in which the child routes and pages should be rendered inside, but there's no navigation inside someparent.html.

From the main router/routes in app.js it should be possible to click a link and land - not on the parent/base class "someparent" itself, but directly on the children of the "someparent" "base/parent views and controllers", rendering both, when you click a link in the navigation menu of app.html built from the routes in app.js (and maybe routes in someparent.js injecting the child router in the parent or what?).

So essentially what I need is to achieve almost the same thing as basic routing - but as I mentioned I need to have multiple of these routes / pages as partials of a parent view/controller. I couldn't find any info on this from googling extensively for weeks, so hopefully someone in here will be able to understand what I ask, and have an idea of how to go about this in Aurelia, the right way?

Answer 1

Create a class to contain your shared state and take a dependency on that class in your view-models. You can use the NewInstance.of resolver to control when shared state is created vs reused.

Here's an example: https://gist.run?id=4cbf5e9fa71ad4f4041556e4595d3e36

shared-state.js

export class SharedState {
  fromdate = '';
  todate = '';
  language = 'English';
}

shared-parent.js

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;
  }
}

note: if you use @inject(SharedState) instead of @inject(NewInstance.of(SharedState)), a single instance of SharedState will be shared with all components. This may be what you are looking for, I wasn't sure. The purpose of @inject(NewInstance.of(SharedState)) is to make sure the parent and it's children have their own SharedState instance.

child-a.js

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildA {
  constructor(state) {
    this.state = state;
  }
}

child-b.js

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildB {
  constructor(state) {
    this.state = state;
  }
}