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>