Search code examples
javascriptweb-componentaurelia

Hidden router view breaks databinding - Aurelia

I would like to conditionally show a login page, but encountered an issue. I reproduced it with the the official aurelia skeleton application by changing app.html to the following:

<template>
  <require from="nav-bar.html"></require>
  <require from="bootstrap/css/bootstrap.css"></require>

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

  <template if.bind="false">
    <div class="page-host">
      <router-view></router-view>
    </div>
  </template>
  <h1 if.bind="true">Not logged in, show login page</h1>
</template>

The problem is that the router object no longer is defined, and therefore the navbar doesn't work (no navigation items are shown). Someone knows what I am doing wrong here?

Solution

  • It seems that if you remove <router-view>, the router does not work. You should use a different approach to handle the login.

    Take a look at Aurelia Docs at http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.3/doc/article/cheat-sheet and search for "Customizing the Navigation Pipeline". I believe it will help you

    EDIT

    According to Jeremy Danyow's comment, the setRoot(module) function would be an easier solution. More information at https://stackoverflow.com/a/33458652/725866