Accessing different objects in nested <Each> elements

General
1

I’m just wondering how you might access different objects or arrays when nested in another Each element block. See the sample below.

<JavaScript>
  var    tabs = [
    {
      title: "Tab 1",
      bgColour: "#e4e4e4",
      textColour: "#8ba892",
      ypos: 0.1667
    },
    {
      title: "Tab 2",
      bgColour: "#8ba892",
      textColour: "#e4e4e4",
      ypos: 0
    }
  ];

  var numbers = {
      "a":[1,2,3],
      "b":[4,5,6]
  }

  module.exports = {
      tabs: tabs,
    numbers: numbers
  };

</Javascript>

<Panel Dock="Fill" Background="#8ba200" Padding="10,10,10,0">
  <LinearNavigation ux:Name="lnav" Duration="0.3" Easing="QuadraticOut" />
  <SwipeNavigate SwipeDirection="Down" SwipeEnds="Closed" />
      <Each Items="{tabs}">
      <Rectangle ClipToBounds="true" Fill="{bgColour}" CornerRadius="10">
        <Translation Y="{ypos}" RelativeTo="Size" />
        <StackPanel Orientation="Vertical" Dock="Fill">
          <Text Value="{title}" TextColor="{textColour}" Margin="10,20,10,20" FontSize="20" />
          <Each Items="{numbers.a}">
              <Text Value="NUMBER VALUE BINDING HERE" TextColor="#fff" Padding="10"  Background="#f3901e" />
          </Each>
        </StackPanel>
        <EnteringAnimation>
          <Move Y="0.3334" RelativeTo="Size" />
        </EnteringAnimation>
        <DropShadow Angle="180" Distance="0" Size="10" Spread="0.1"  /><DropShadow />
      </Rectangle>
  </Each>
 </Panel>

Can’t seem to get anything up and running. Many thanks in advance!

2

Hi! What you are doing there is actually correct.

Just replace “NUMBER VALUE BINDING HERE” with “{}” and it works:

<Text Value="{}" TextColor="#fff" Padding="10"  Background="#f3901e" />