Hard time with <NavigateTo Target="{variable}">

How-to Discussions
1

Hi guys, can anyone help me understand why NavigateTo is failing to trigger?

My .UX is:

<App Theme="Basic" Background="#370466">
    <JavaScript File="MainScripts.js" />
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <!-- general styles -->
        <Style>
            <Page Background="#370466">
                <EnteringAnimation>
                    <Move Y="1" RelativeTo="ParentSize" Duration="1.5" Easing="QuarticIn"/>
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move Y="-1" RelativeTo="ParentSize" Duration="1.5" Easing="QuarticOut"/>
                </ExitingAnimation>
            </Page>
            <Text TextWrapping="Wrap" FontSize="13" TextColor="#FFF" LineSpacing="3" />
        </Style>

        <!-- nav structure -->
        <Panel>
            <HierarchicalNavigation ux:Name="nav"/>
            <SwipeNavigate SwipeDirection="Down" SwipeEnds="Short"/>
            <OnBackButton>
                <GoBack />
            </OnBackButton>

            <!-- pages -->
            <Page Title="Começar">
                <StackPanel Alignment="Top">
                    <Text FontSize="20" Margin="72, 43, 0, 0">Title</Text>
                    <BulletPoint Id="1" Title="Bem-Vindo" Description="Selecione como deseja continuar" />
                    <StackPanel Margin="8,15,8,8">
                        <DropShadow />
                        <Rectangle CornerRadius="3" Color="#FFF" Width="100%">
                            <StackPanel Margin="0,8,0,8">
                                <Each Items="{loginOptions}">
                                    <Panel>
                                        <Clicked>
                                            <NavigateTo Target="{page}" />
                                            <DebugAction Message="{page}" />
                                        </Clicked>
                                        <Text FontSize="16" TextColor="#000" Opacity=".94" Margin="65,14,0,0" Value="{name}" ux:Name="links" />
                                        <Rectangle Fill="#FFF" Width="100%" Height="49" />
                                        <WhileKeyboardVisible>
                                            <Change Target="links.Opacity" Value="0.2"/>
                                            <Change Target="links.HitTestMode" Value="None"/>
                                        </WhileKeyboardVisible>
                                    </Panel>
                                </Each>
                                <FC_Cell_IcnField />
                            </StackPanel>
                        </Rectangle>
                    </StackPanel>
                    <Text Margin="72,10,20,3">Some text</Text>
                    <Text Opacity=".5" Margin="72,0,20,20">Even more text</Text>
                </StackPanel>
                <WhileKeyboardVisible>
                    <Move Y="-1" RelativeTo="Keyboard" Duration=".5" Easing="QuarticInOut" />
                </WhileKeyboardVisible>
            </Page>

            <Page ux:Name="pageParceiras" Title="Parceiras" ux:AutoBind="false">
            </Page>

            <Page ux:Name="pageGoogle" Title="Google" ux:AutoBind="false">
            </Page>

            <Page ux:Name="pageFacebook" Title="Facebook" ux:AutoBind="false">
            </Page>

        </Panel>

        <Panel Dock="Bottom">
            <Rectangle Layer="Background" Fill="#F00" />
        </Panel>

    </DockPanel>
</App>

And my .JS is:

var Observable = require("FuseJS/Observable");

var loginOptions = Observable();
loginOptions = [
  {name: "Universidade",  page:"pageParceiras"},
  {name: "Google",        page:"pageGoogle"},
  {name: "Facebook",      page:"pageFacebook"}
];

module.exports = {
  loginOptions: loginOptions
};

Hope to hear from you soon.

Best, Mauricio

2

DebugAction is printing the expected value, and the BulletPoint class can be commented without affecting the outcome.

3

I think it should work if you remove ux:AutoBind=“false” on the pages.

4

Thank you Anders. It indeed works, but if I remove the ux:AutoBind="false" the pages are allocated above the first page.

What I’m trying to do is a non-linear login flux that allows the user to “scroll back” to any past step. (and as a non-linear, I wish I could allocate only the screens the user needs to see).

Is there a way I can programatically bind a page? That way I could try to bind it just before the <NavigateTo />

Hope to hear from you soon. Best, Mauricio

5

The problem with ux:AutoBind="false" in this situation is that the bound variable from JS is using a name to locate the node. As the nodes are not rooted anywhere it is unable to find that named node, thus it can’t go there. There is no way currently to refer to a non-rooted node via a JS Observable.

A kind of ugly workround for now is to use a Match close and then hard-code the UX NavigateTo for each of the known nodes.

Obviously we’ll need to look for a cleaner way to use this from JS. We might also look to giving DirectNavigation a history, in which case you could basically achieve the same result.

6

Yeah, kind of ugly indeed :stuck_out_tongue:

I was trying to use JS just to leave some fields dynamic but atm I guess I’ll have to stick to hard code.

Thanks, and please drop a note when you guys improve on this matter.