Accessing data from within Each callback

How-to Discussions
1

I have a survey with a number of pages and each page has 5 options for a user to chose (note: the example code below does not prevent the user from picking more than one option). I would like to store these choices in an observable array, where each element holds the option selected on that page. The use case is that when a user fills out every option the answers are sent to an external API and various results are shown. But first I need to know what page/index I am on.

In the example code below I have tried to access page name (a proxy for the index) from the printArgs callback in the inner Each but it is null and the data context does not appear to have a way to “reach up” to the outer Each. The documentation on each (https://www.fusetools.com/docs/fuse/reactive/each) says ... You can, however, access nodes declared outside the Each from the inside.

How do i access other data from an inner Each callback? If there is a better way to update an Observable array from an inner Each I’d like to know as well.

<Page ux:Class="Test_StandaloneEachDataContext">
    <JavaScript>
    	var Observable = require("FuseJS/Observable");
        var items = Observable(
                    { name: "Very Much", happy: Observable(false) },
                    { name: "Yeah, Kinda", happy: Observable(true) },
                    { name: "Not Really", happy: Observable(true) },
                    { name: "Nope", happy: Observable(false) },
                    { name: "Get me Away!", happy: Observable(true) }
                )

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

        function printArgs(args){
        	console.log("clicked item data context: " + JSON.stringify(args));
            console.log(this.name + " is the page we're on!")
            console.log("Data context? " + Object.keys(this))
        }

        module.exports = {
            items: items,
            pages: pages,
            printArgs: printArgs
        };
    </JavaScript>

    <Rectangle ux:Class="SelectableRectangle2" Height="35" CornerRadius="2" Color="{Property SelectionColor}">
            <string ux:Property="Text" />
            <float4 ux:Property="SelectionColor" />
            <Rectangle ux:Dependency="backgroundRect" />

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

            <Attractor ux:Name="colorAttractor" Target="backgroundRect.Color" Value="#fff" Type="Easing" Duration="0.2" DurationExp="0" />
            <Selected>
                <Set colorAttractor.Value="{Property SelectionColor}" />
            </Selected>
            
            <WhileSelected>
                <Scale Factor="1.3" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
            </WhileSelected>

            <Clicked >
                <ToggleSelection />
            </Clicked>
    </Rectangle>

    <PageControl Padding="24,32,24,8">
        <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 Items="{items}">
                            <SelectableRectangle2 Clicked="{printArgs}" SelectionColor="#EC407A" backgroundRect="background" Text="{name}" />
                        </Each>
                    </StackPanel>
                <Rectangle ux:Name="background" Color="#fff" />
            </StackPanel>
        </Each>
    </PageControl>
</Page>
2

After searching the forums for hints I came across this question where it turns out that PageControl doesn’t have a javascript api. I don’t think that’s quite relevant to this issue but the resolution uses properties and dependencies, which is a preferred way to interconnect components. So the following just uses an observable, updated by PageControl, that allows me to access “external” data within an Each callback. In this case I use the ActiveIndex instead of accessing Pages.name and that’s good enough for now.

<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));
        }

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

    <Rectangle ux:Class="SelectableRectangle2" Height="35" CornerRadius="2" Color="{Property SelectionColor}">
            <string ux:Property="Text" />
            <float4 ux:Property="SelectionColor" />
            <Rectangle ux:Dependency="backgroundRect" />
            <string ux:Property="Page" />
            <PageControl ux:Dependency="MyPage" />

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

            <Attractor ux:Name="colorAttractor" Target="backgroundRect.Color" Value="#fff" Type="Easing" Duration="0.2" DurationExp="0" />
            <Selected>
                <Set colorAttractor.Value="{Property SelectionColor}" />
            </Selected>
            
            <WhileSelected>
                <Scale Factor="1.3" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
            </WhileSelected>

            <Clicked >
                <ToggleSelection />
                <Callback Handler="{printMe}" />
            </Clicked>
    </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="#EC407A" backgroundRect="background" Text="{itemname} {name}" />
                        </Each>
                    </StackPanel>
                <Rectangle ux:Name="background" Color="#fff" />
            </StackPanel>
        </Each>
    </PageControl>
</Page>