Is nested navigation even possible?

Hi,

I’m new to Fuse and am generally loving it so far. But for the life of me I can’t seem to make my nested navigation work.

First and foremost, is it even possible to have 2 navigation tags in your app?

My app has the following navigation hierarchy:

  • login screen
    • Home
    • Other

Currently I have an outer nav that deals with changing from LoginScreen -> Home. And I have an inner nav that deals with going from Home <–> Other.

Do I need to set this up in 1 hierarchical navigation tag?

Weirdly, when I try running my app with the nav-within-a-nav, the buttons on a nested page stop handling click events whenever I export the Observable that holds the nested page’s name (for the nav’s dynamic page assignment). BTW, just for extra tinfoil-hattiness, I made sure that my inner and outer navs all had unique ux:Name attributes to avoid any possible namespace collisions (I wish I knew whether ux:Name attribute uniqueness mattered, so hopefully someone can tell me!). I can instantiate an Observable and use it in functions, as long as it’s not exported.

I’m pretty overwhelmed, first by this weird module.exports-silently-failing bug. And second by how navigation is supposed to work in Fuse.

Here’s a bunch of stuff I’ve tried for the inner page (which is its own .ux file). Thanks for your advice!

<Panel ux:Class="LoginSuccessPage">

  <JavaScript>
   // JS approach doesnt work because exporting thePage blows it up silently...
    var Observable = require('FuseJS/Observable');
    var thePage = Observable('Home');
    module.exports = {
      // thePage: thePage,
      goToHome: function() {
        // thePage.value = 'Home';
        console.log('going home'); //thePage.value);
      },
      goToOther: function() {
        // thePage.value = 'Other';
        // WTF: as soon as thePage is exported, the click handlers stop working?
        console.log('going other') //thePage.value);
      },
    };
  </JavaScript>

  <DirectNavigation Active="{thePage}" ux:Name="innerNav" />
  <!-- <PageControl Active="Home" ux:Name="innerNav"> PageControl+NavigateTo's also didn't work -->
  <Page ux:Name="Home">
    <Text Value="Woohoo we are home!" />
  </Page>

  <Page ux:Name="Other">
    <Text Value="Other stuff!" />
  </Page>

  <Button Text="Home" Alignment="BottomLeft">
    <!-- Callback doesnt work due to weird JS module.exports silent bug -->
    <Clicked><Callback Handler="{goToHome}" /></Clicked>
    <!-- This also didn't work -->
    <!-- <Clicked><NavigateTo Target="Home" /></Clicked> -->
    <!-- <Clicked><Set innerNav.Active="Home" /></Clicked> -->

    <!-- <Clicked><NavigateTo Target="Home" NavigationContext="innerNav"/></Clicked> -->
  </Button>
  <Button Text="Other" Alignment="BottomRight">
    <Clicked><Callback Handler="{goToOther}" /></Clicked>
    <!-- This also didn't work -->
    <!-- <Clicked><NavigateTo Target="Other" /></Clicked> -->
    <!-- <Clicked><Set innerNav.Active="Other" /></Clicked> -->
    <!-- <Clicked><NavigateTo Target="Other" NavigationContext="innerNav"/></Clicked> -->
  </Button>

  <!-- </PageControl> -->
</Panel>

Well I’ve answered my own question: Yes, it is possible to have nested Navigation tags in your app.

I don’t know why I couldn’t get it to work earlier. Probably a small syntax error or something. I should’ve persevered a bit more.