ToggleSelection selecting wrong parent node?

How-to Discussions
1

By way of example, I have the self contained page below, where I expected that the ToggleSelection action within the “SelectedRectangle2” Clicked node would have selected the appropriate button and allowed the Selected and WhileSelected changes to run. However, in this example when clicking on a button I only see the callbacks printed but nothing selected. It looks like ToggleSelection will try to select its parent but I am unable to point it to the right node in TargetNode. Ideally, when clicked, the button should change color and grow in size. Any thoughts?

<Page ux:Class="Test_StandaloneEachDataContext">
    <JavaScript>
    	var Observable = require("FuseJS/Observable");

        var activeIndex = Observable(0)

        var items = Observable(
                    {itemname: "Very Much"},
                    {itemname: "Yeah, Kinda"},
                    {itemname: "Not Really"},
                    {itemname: "Nope"},
                    {itemname: "Get me Away!"}
                )

        var pages = Observable(
                     {name: "Page1"},
                     {name: "Page2"},
                     {name: "Page3"},
                     {name: "Page4"}
                    )

        function printMe(arg){
            console.log("You're on Page : " + JSON.stringify(activeIndex.value));
            console.log("You're on Page : " + JSON.stringify(arg["data"]["itemname"]));
        }

        function somethingHappened(arg){
            console.log("Yeah something happened!");
        }

        module.exports = {
            items: items,
            pages: pages,
            printMe: printMe,
            somethingHappened: somethingHappened,
            activeIndex: activeIndex
        };
    </JavaScript>

    <Rectangle  ux:Class="SelectableRectangle2"
                Height="35"
                CornerRadius="8"
                Color="{Property SelectionColor}">

           
            <PageControl ux:Dependency="MyPage" />
            <Rectangle ux:Dependency="backgroundRect" />

            <string ux:Property="Text" />
            <float4 ux:Property="SelectionColor" /> 
            <string ux:Property="Page" />

            <Text Value="{ReadProperty Text}" />

            <Attractor ux:Name="colorAttractor" Target="backgroundRect.Color" Value="#fff" Type="Easing" Duration="0.2" DurationExp="0" />

           <Clicked >
                <ToggleSelection/>
                <Callback Handler="{printMe}" />
                <Callback Handler="{somethingHappened}" />
            </Clicked>

            <Selected>
                <Set colorAttractor.Value="{Property SelectionColor}" />
                <Callback Handler="{somethingHappened}" />
            </Selected>
           
            <WhileSelected>
                <Scale Factor="2.3" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
            </WhileSelected>
    </Rectangle>

    <PageControl Padding="24,32,24,8" ActiveIndex="{activeIndex}" ux:Name="nav">
        <Each Items="{pages}">
            <StackPanel>
                    <StackPanel Alignment="Center" ItemSpacing="6" Margin="0, 10, 0, 0" Padding="0, 0, 0, 0">
                        <Rectangle Layer="Background" Color="White" CornerRadius="3" />
                        <Each ux:Name="myEach" Items="{items}">
                            <SelectableRectangle2 MyPage="nav" Page="{name}" ux:Name="selected" SelectionColor="#DC407A" backgroundRect="background" Text="{itemname}/{name}" />
                        </Each>
                    </StackPanel>
                <Rectangle ux:Name="background" Color="#eee" />
            </StackPanel>
        </Each>
    </PageControl>
</Page>
2

ToggleSelected works for Selectable items inside of a Selection. Refer to https://www.fusetools.com/docs/fuse/selection/selection

3

Thanks, between the tutorial and example code i was able to hack together an example of what I wanted:

<Page ux:Class="Test_StandaloneEachDataContext">
    <JavaScript>
    	var Observable = require("FuseJS/Observable");

        var activeIndex = Observable(0)

        // Can make an Observable array of size Survey, 
        // that can modified by the combination of items, pages selection

        var items = Observable(
                    {itemname: "Very Much"},
                    {itemname: "Yeah, Kinda"},
                    {itemname: "Not Really"},
                    {itemname: "Nope"},
                    {itemname: "Get me Away!"}
                )

        var item_length = items.length

        var pages = Observable(
                     {name: "Page1"},
                     {name: "Page2"},
                     {name: "Page3"},
                     {name: "Page4"}
                    )

        function printMe(arg){
            console.log("You're on Page : " + JSON.stringify(activeIndex.value));
            console.log("You're on Response : " + JSON.stringify(arg["data"]["itemname"]));
        }

        function somethingHappened(arg){
            console.log("Yeah something happened!");
        }

        module.exports = {
            items: items,
            item_length: item_length,
            pages: pages,
            printMe: printMe,
            somethingHappened: somethingHappened,
            activeIndex: activeIndex
        };
    </JavaScript>

    <DockPanel ux:Class="PizzaType" Padding="5">
        <string ux:Property="Title" />
        <string ux:Property="Ingredients" />
        
        <Selectable Value="{ReadProperty Title}" />
        <Rectangle ux:Name="theBack" Layer="Background" Width="200" CornerRadius="5" Color="#FFF" />
        
       <Circle ux:Name="theCheck" Dock="Right" Color="#060" Visibility="Hidden" Width="20" Alignment="Default" Margin="0, 0, 0, 0" />

        <Text FontSize="30" Dock="Top" Value="{ReadProperty Title}" LayoutRole="Standard" TransformOrigin="Anchor" Alignment="HorizontalCenter" />
        <Text FontSize="12" Value="{ReadProperty Ingredients}" Alignment="HorizontalCenter" />
        
        <WhileSelected>
            <Change theBack.Color="#AFA" Duration="0.2" />
            <Change theCheck.Visibility="Visible" />
            <Scale Factor="1.1" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
        </WhileSelected>

        <Tapped>
            <ToggleSelection />
            <Callback Handler="{printMe}" />
            <Callback Handler="{somethingHappened}" />
        </Tapped>
    </DockPanel>
    
    <PageControl Padding="24,32,24,8" ActiveIndex="{activeIndex}" ux:Name="nav">
        <Each Items="{pages}">
            <DockPanel>
                    <StackPanel ItemSpacing="{item_length}" Color="#CCC" Padding="{item_length}" Alignment="Center">
                            <Selection ux:Name="pizzaSel" MinCount="1" MaxCount="1" />
                                <Each ux:Name="myEach" Items="{items}">
                                    <PizzaType Title="{itemname}_{name}" Ingredients="Mozarella, Basil, Tomatoes" />
                                </Each>
                    </StackPanel>
            </DockPanel>
        </Each>
    </PageControl>
</Page>