Tab Switching Issue

app.html

<template>
    <require from="navbar"></require>

    

    <nav-bar router.bind="router"></nav-bar>


    <div class="page-host">
        <router-view></router-view>
    </div>
</template>

app.js

import * as fixes from 'aurelia-fixes';
import { Aurelia } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';

export class App {
    router;

    configureRouter(config, router) {
        config.title = 'Test App';
        config.map([
            { route: ['','new'], name: 'primary', moduleId: 'primary', nav: true, title: 'Primary' },
            { route: ['other'], name: 'other', moduleId: 'other', nav: true, title: 'Other' }
        ]);

        this.router = router;
    } 
}

aurelia-fixes.js

// This file is for code that fixes issues with aurelia.  Please add links to any related Github issues or pull requests.


// Preserve bindingContext while unbinding
// https://github.com/aurelia/binding/issues/361
// https://github.com/aurelia/templating/pull/306
// https://github.com/aurelia/framework/issues/372

import {View} from 'aurelia-templating';

View.prototype.unbind = function unbind() {
    var controllers = void 0;
    var bindings = void 0;
    var children = void 0;
    var i = void 0;
    var ii = void 0;

    if (this.isBound) {
        this.isBound = false;
        
        if (this.resources)
          this.resources._invokeHook('beforeUnbind', this);
        
        if (this.controller !== null) {
            this.controller.unbind();
        }

        bindings = this.bindings;
        for (i = 0, ii = bindings.length; i < ii; ++i) {
            bindings[i].unbind();
        }

        controllers = this.controllers;
        for (i = 0, ii = controllers.length; i < ii; ++i) {
            controllers[i].unbind();
        }

        children = this.children;
        for (i = 0, ii = children.length; i < ii; ++i) {
            children[i].unbind();
        }

        this.bindingContext = null;
        this.overrideContext = null;
    }
};


import { AccessMember } from 'aurelia-framework';

AccessMember.prototype.assign = function (scope, value) {
    let instance = this.object.evaluate(scope);

    if (instance === null || typeof instance === 'undefined') {
        return;
    }

    return instance[this.name] = value;
}

boxes.html

<template>
    <div class="container-fluid">
        <div class="row row-boxed row-header">
            <div class="col-sm-2">Box Number</div>
            <div class="col-sm-2">Box Description</div>
            <div class="col-sm-1">Infectious?</div>
        </div>
    </div>
    <div class="container-fluid" style="overflow-y: auto; overflow-x: hidden; border: 1px solid black; flex-grow: 1; height: 100%" tabindex="-1">
        <div repeat.for="box of boxes">
            <label>${box}</label>
            <box-item box.bind="box" is-non-airport-origin.bind="isNonAirportOrigin" origin-code.bind="originCode" boxes-callbacks.bind="boxesState.boxesCallbacks"></box-item>
        </div>
    </div>
    
</template>

boxes.js

import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
import { TaskQueue, bindable, inject, computedFrom } from 'aurelia-framework';

@inject(EventAggregator)
export class Boxes {
  
  constructor(eventAggregator){
    this.eventAggregator = eventAggregator;
  }
  
  setupSubscriptions(){
    this.teardownSubscriptions();
    
    this.boxesSubscription = this.eventAggregator.subscribe('new-box-request', this.addBoxRequested.bind(this));
    
    console.log('box Subscriptions setup');
  }
  
  teardownSubscriptions() {
    if (this.boxesSubscription){
      this.boxesSubscription.dispose();
    }
  }
  
  
  attached(){
    this.setupSubscriptions();
  }
  
  detached(){
    this.teardownSubscriptions();
  }
  
  @bindable boxes;
  
  addBoxRequested() {
    console.log('Box Request Recieved');
    var boxNumber = Math.floor(Math.random() * 100);
    
    this.boxes.push('Box ' + boxNumber);
  }
}

classes.js

import {inject} from 'aurelia-dependency-injection'
export class Action1Dependency {}
export class Action2Dependency {}

export class ActionBase{
  
}

@inject(Action1Dependency)
export class Action1 extends ActionBase{
  constructor(dep){
    super();
    this.dep = dep;
  }
}

@inject(Action2Dependency)
export class Action2 extends ActionBase{
  constructor(dep){
    super();
    this.dep = dep;
  }
}

helpers.js

import { Router } from 'aurelia-router';
import { Container } from 'aurelia-framework';

export class Helpers {
    isNullOrUndefined(value) {
        if (value === null || typeof value === 'undefined') {
            return true;
        } else {
            return false;
        }

    }

    router = null;

    // This will replace the current url in the browsers history without
    // running through Aurelia's lifecycle again.
    static replaceCurrentUrlWithoutRouting(urlFragment: string) {
        if (!Helpers.router)
            Helpers.router = Container.instance.get(Router);

        const pathname = this.router.history.location.pathname;

        window.history.replaceState(null, 'Shipment Tracking', pathname + '#/' + urlFragment);
    }

    // This wil add a new entry to the browsing history and make it current, while
    // not running through Aurelia's lifecycle again.
    static setNewUrlWithoutRouting(urlFragment) {

        if (!Helpers.router)
            Helpers.router = Container.instance.get(Router);

        const pathname = this.router.history.location.pathname;

        window.history.pushState(null, 'Shipment Tracking', pathname + '#/' + urlFragment);
    }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js"  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <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>

navbar.html

<template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

navbar.js

import {bindable} from 'aurelia-framework';

export class NavBar {
    constructor() {
       
    }

    @bindable router = null;  
    
}

other.html

<template>
  <br>
  <br>
  <br>
  Other Page
</template>

other.js

export class Other {
  
}

primary-state.js

export class PrimaryState{
  constructor(){
    
  }
  
  mainObject;
}

primary.html

<template>
  <require from="boxes"></require>
  <br><br><br>
  
  <button click.trigger="addBoxClicked()">Add Box</button>
  <button click.trigger="clearAll()">Clear All</button>
  <boxes boxes.bind="primaryState.mainObject.boxes"></boxes>
</template>

primary.js

import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
import { Router } from 'aurelia-router';
import { TaskQueue, bindable, inject, computedFrom } from 'aurelia-framework';
import { ViewStateManager } from 'view-state-manager';
import { PrimaryState } from 'primary-state';
import { Helpers } from 'helpers';

@inject(ViewStateManager, EventAggregator, TaskQueue, Router)
export class Primary {
  
  mainObject;
  
  constructor(viewStateManager, eventAggregator, taskQueue, router) {
    this.primaryState = viewStateManager.primaryState;
    this.eventAggregator = eventAggregator;
    this.taskQueue = taskQueue;
    this.router = router;
  }
  
  clearAll(){
    this.clearMainObject();
  }
  
  clearMainObject() {
    let clearPromise = new Promise((resolve, reject) => {
      console.log('clear called');
      this.primaryState.mainObject = null;
      this.primaryState.mainObject = {};
      this.primaryState.mainObject.boxes = [];    
      
      
      this.taskQueue.queueMicroTask(() => {
        console.log('Box Request Sent');
        this.requestNewBox();
      });
      
      resolve();
    })
    return clearPromise;
  }
  
  addBoxClicked(){
    this.requestNewBox();
  }
  
  requestNewBox(){
    this.eventAggregator.publish('new-box-request');
  }
  
  activate(param) {
        let primarySetupPromise = new Promise((resolve, reject) => {
            console.log('activating primary view');
            if (!this.primaryState) {
                throw new Error('primaryState not setup in activate: params = ' + JSON.stringify(param));
            }

           
            // This is the path that we are navigating to.  We are looking to see if it is 
            // 'primary/new' becaues then we should start a new mainObject.
            const currentPathFragment = this.router.history.fragment;
            this.isNew = currentPathFragment === '/primary/new';

            const pathname = this.router.history.location.pathname;

        
            // We have an existing mainObject already loaded that we are just showing again.
            if (this.primaryState.mainObject && !this.isNew) {

                Helpers.replaceCurrentUrlWithoutRouting('/primary/new');    
                
                resolve();
            }
            // If we don't have a mainObject or expressly want a new one
            else {
                // If we came from a url that was not our actual "new mainObject", when we want to replace it
                // with the new mainObject url
                if (!this.isNew) {
                    Helpers.replaceCurrentUrlWithoutRouting('/primary/new');  
                }

                // If this is brand new view, then we need to create a new instance of the mainObject object
                this.clearMainObject()
                    .then(() => {
                        resolve();
                    })
                    .catch(() => {
                        reject();
                    });

            }


        });

        return primarySetupPromise;
    }
} 

view-state-manager.js

import {PrimaryState} from 'primary-state';

export class ViewStateManager{
  constructor(){
    this.primaryState = new PrimaryState();
  }
  primaryState;
}