Repeat a Each element and change some values

[Cristian_Karmy]

Hi,

I wonder if its posible to repeat a Each element in the pages of a PageControl.

The element is this:

    <Each Items="{EquipoPrimeroGrupoA}">        <Text Value="{Nombre}" TextColor="#777" TextAlignment="Left" Font="Regular" FontSize="13" Alignment="VerticalCenter" Margin="6,0,0,0" />
    </Each>

I try to do it with ux:Class but I get a error that Each element don’t have a value call “Items”.

It is posible to repeat this in each page and change only the variables in “{}” to call diferents functions in javascript?

Thanks!

[Kristian_Hasselknipp]

I don’t fully understand what you are trying to do? Could you clarify a bit and perhaps post some more code?

[Cristian_Karmy]

I have this code in my app:

<App Theme="Basic" Background="#333">
    <Font File="Roboto-Bold.ttf" ux:Global="Bold" />
    <Font File="Roboto-Regular.ttf" ux:Global="Regular" />
    <Font File="Roboto-Light.ttf" ux:Global="Light" />
    <DockPanel>
        <JavaScript File="MainView.js" />
        <JavaScript File="parse-1.6.3.js" ux:Global="Parse" />
        <iOS.StatusBarConfig Style="Light" />
        <StatusBarBackground Dock="Top"/>
        <BottomFrameBackground Dock="Bottom"/>

        <PageControl ux:Name="pages">
            <Page ux:Name="page1" Background="#fff" >
                <ScrollView>                    <StackPanel Margin="0,8,0,0" Width="95%">
                        <!-- Grupo A -->
                        <Panel>
                            <Rectangle Width="100%" Height="100%">
                                <Stroke Width="2" Brush="#777" />
                            </Rectangle>
                            <StackPanel>
                                <StackPanel>
                                    <Match Value="{HayA}">
                                        <Case Bool="true">
                                            <StackPanel>
                                                <Panel>
                                                    <Text Value="GRUPO 1" TextColor="#777" TextAlignment="Center" Font="Bold" FontSize="16" Margin="6,6,6,3" />
                                                    <StackPanel Orientation="Horizontal" Alignment="Right">
                                                        <Panel Width="28." Height="28." Margin="0,0,1,0">
                                                            <Text Alignment="Center" Font="Bold" Value="D.G" TextColor="#777" Margin="0,3,0,0" FontSize="10" />
                                                        </Panel>
                                                        <Panel Width="28." Height="28." Alignment="Right">
                                                            <Text Alignment="Center" Font="Bold" Value="PTS" TextColor="#777" Margin="0,3,0,0" FontSize="10" />
                                                        </Panel>
                                                    </StackPanel>
                                                </Panel>
                                                <Rectangle Height="2" Background="#777" />
                                                <!-- Each Equipo en Grupo -->
                                                <Each Items="{EquipoPrimeroGrupoA}">                                                    <Panel Height="28.">
                                                        <Rectangle Height="1" Background="#999" Alignment="Bottom" />
                                                        <StackPanel Orientation="Horizontal" Alignment="Right">
                                                            <Panel Width="28." Height="28." Margin="0,0,1,0">
                                                                <Text Alignment="Center" Font="Bold" Value="{Goles}" TextColor="#fff" FontSize="16" />
                                                                <SolidColor Color="#bbb" />
                                                            </Panel>
                                                            <Panel Width="28." Height="28." Alignment="Right">
                                                                <Text Alignment="Center" Font="Bold" Value="{Goles}" TextColor="#fff" FontSize="16" />
                                                                <SolidColor Color="#aaa" />
                                                            </Panel>
                                                        </StackPanel>
                                                        <Text Value="{Nombre}" TextColor="#777" TextAlignment="Left" Font="Regular" FontSize="13" Alignment="VerticalCenter" Margin="6,0,0,0" />
                                                    </Panel>
                                                </Each>
                                            </StackPanel>
                                        </Case>
                                    </Match>
                                </StackPanel>
                             </StackPanel>
                        </Panel>
                        <!-- Partido -->
                        <Each Count="1">
                            <StackPanel>
                                <DockPanel Height="39.">
                                    <Text TextColor="#777" Margin="0,0,4,0" Dock="Left" Value="00:00" Font="Bold" FontSize="35" />
                                    <Rectangle Alignment="Bottom" Width="100%" Height="1" Background="#d0d2d3" />
                                </DockPanel>
                                <DockPanel Margin="0,10">
                                    <Text Alignment="Center" Dock="Left" TextColor="#fff" Value="CANCHA" Background="#7ac8d5" Font="Light" FontSize="20" Padding="20,5" />
                                    <Text Alignment="Center" Dock="Left" TextColor="#fff" Value="0" Background="#777777" Font="Bold" FontSize="20" Padding="15,5" />
                                    <Text Width="100%" TextAlignment="Right" Alignment="Center" TextColor="#777777" Value="PRIMEROS" Font="Light" FontSize="20" Background="#ddd" Padding="15,5" />
                                </DockPanel>
                                <DockPanel>
                                    <Panel Dock="Left" Height="40." Background="#ccc">
                                        <Text Alignment="Center" TextColor="#777" Value="0" Font="Bold" FontSize="25" Padding="15,0" />
                                    </Panel>
                                    <Panel Height="40." Background="#eee">
                                        <Text Width="100%" Alignment="Center" TextColor="#777" Value="NOMBRE EQUIPO" Font="Regular" FontSize="15" Padding="15,0" />
                                    </Panel>
                                </DockPanel>
                                <Panel MinWidth="110%" Height="40." Background="#777">
                                    <Text Alignment="Center" TextColor="#aaa" Value="V/S" Font="Light" FontSize="22" />
                                </Panel>
                                <DockPanel Margin="0,0,0,20">
                                    <Panel Dock="Left" Height="40." Background="#ccc">
                                        <Text Alignment="Center" TextColor="#777" Value="0" Font="Bold" FontSize="25" Padding="15,0" />
                                    </Panel>
                                    <Panel Height="40." Background="#eee">
                                        <Text Width="100%" Alignment="Center" TextColor="#777" Value="NOMBRE EQUIPO" Font="Regular" FontSize="15" Padding="15,0" />
                                    </Panel>
                                </DockPanel>
                                <Rectangle Alignment="Bottom" Width="100%" Height="1" Background="#d0d2d3" />
                            </StackPanel>
                        </Each>
                    </StackPanel>
                </ScrollView>
                <WhileActive Threshold="0.5">
                  <Callback Handler="{QueryEquiposPrimeros}" />
                  <Set tabBar.LayoutElement="Tab1" />
                  <Change AnimacionColores.Active="1" />
                </WhileActive>
            </Page>
            <Page ux:Name="page2" Background="#fff">
                <Text Value="2" Alignment="Center"  />
                <WhileActive Threshold="0.5">
                  <Set tabBar.LayoutElement="Tab2" />
                  <Change AnimacionColores.Active="2" />
                </WhileActive>
            </Page>
            <Page ux:Name="page3" Background="#fff">
                <Text Value="3" Alignment="Center"  />
                <WhileActive Threshold="0.5">
                  <Set tabBar.LayoutElement="Tab3" />
                  <Change AnimacionColores.Active="3" />
                </WhileActive>
            </Page>
            <Page ux:Name="page4" Background="#fff">
                <Text Value="4" Alignment="Center"  />
                <WhileActive Threshold="0.5">
                  <Set tabBar.LayoutElement="Tab4" />
                  <Change AnimacionColores.Active="4" />
                </WhileActive>
            </Page>
            <Page ux:Name="page5" Background="#fff">
                <Text Value="5" Alignment="Center"  />
                <WhileActive Threshold="0.5">
                  <Set tabBar.LayoutElement="Tab5" />
                  <Change AnimacionColores.Active="5" />
                </WhileActive>
            </Page>
            <Page ux:Name="page6" Background="#fff">
                <Text Value="6" Alignment="Center"  />
                <WhileActive Threshold="0.5">
                  <Set tabBar.LayoutElement="Tab6" />
                  <Change AnimacionColores.Active="6" />
                </WhileActive>
            </Page>
            </PageControl>
    </DockPanel>
</App>

6 pages that get the info from Parse. The layout is the same in each page. So I don’t want to copy and paste all the code in each page, I only want to change the Match Value="{HayA}" and the values of the Each. In the future if I want to change anything of the design I change once and no in every page…

It is posible to do this or I need to copy the same code in each page?

[Kristian_Hasselknipp]

Hi, you could use Select to choose the data context for your class containing the Each you want to reuse.

Check out this code and see if it does what you want. Let me know if you were thinking about something else

<App Theme="Basic" Background="#fff">
    <PageControl>
        <JavaScript>
            var Observable = require('FuseJS/Observable');

            function Item(i1,i2,i3){
                this.items = Observable(i1,i2,i3);
            }



            var item1 = new Item("one", "two", "three");
            var item2 = new Item("uno", "dos", "tres");
            var item3 = new Item("en", "to", "tre");

            module.exports = {
            item1:item1,
            item2:item2,
            item3:item3
            };

        </JavaScript>
        <Panel ux:Class="myPanel">
            <ScrollViewer>
                <StackPanel>
                    <Each Items="{items}">
                        <Text Value="{}" Margin="10"/>
                    </Each>
                </StackPanel>
            </ScrollViewer>
        </Panel>

        <Page Background="#fff">
            <Select Data="{item1}">
                <myPanel />
            </Select>
        </Page>
        <Page Background="#fff">
            <Select Data="{item2}">
                <myPanel />
            </Select>
        </Page>
        <Page Background="#fff">
            <Select Data="{item3}">
                <myPanel />
            </Select>
        </Page>
    </PageControl>
</App>