Aurelia: change navigation in app.js from view

Asked By: Anonymous

I have an Aurelia project with navigation in app.html and app.js. The project includes a home page that has a different style to it, including navigation that is different than the non-home page views.

I would like to turn off navigation for the home view so I tried setting a variable (showMenu) to toggle the visibility. In fact, I am able to use jQuery to do this, but I wonder if there is an Aurelia way of doing it. If I set this.showMenu to true it shows the menu container, and false hides it. Like this for example:

app.html

  <div class="container" if.bind="showMenu">

app.js

  constructor(router){
  this.router = router;
  this.showMenu = true;  
  ...other things
  }

What I would like to do is set showMenu to false from home.js. I tried this (among 20 or so other attempts), but it does not work.

home.js

  activate() {
    this.showMenu = false;
  }   

Is there a way through $parent or some other means to hide the menu in app.html using a view model?

EDIT

This works but it feels a little like a hack.

home.js

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

  @inject(Router)
  export class Home {

  constructor(router) {

    this.router = router; 

  }

  attached(){
    $("#navbarMenu").hide();
    this.router.refreshNavigation();
  }       
}

Solution

Answered By: Anonymous

You should be able to use router to achieve that. Since this is required for one page only, you can have something like this assuming your route name is home (or you could use other properties of RouteConfig that you have set in configureRouter):

<div class="container" if.bind="router.currentInstruction.config.name !== 'home'">