PageControl from FuseJS

How-to Discussions
1

Hi,

I’d like to create a galley, for that I use this code

<DockPanel Height="250" ux:Name="parentContainer">

<PageControl ux:Name="pageControl" Layer="Background">
    <Each Items="{GameToShow.gallery}">
        <Page>

            <EnteringAnimation>
                <Move X="-1" RelativeTo="ParentSize"/>
            </EnteringAnimation>
        <ExitingAnimation>
            <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
        </ExitingAnimation>

        <Image Url="{url}" StretchMode="UniformToFill"/>

        </Page>
    </Each>

</PageControl>

<PageIndicator Navigation="pageControl" Dock="Bottom" Alignment="Center" >
    <Circle ux:Generate="Factory" ux:Binding="DotFactory" 
            Fill="#343399" Margin="5,0,5,10" 
            Width="10" Height="10" Opacity="0.4">

    <ActivatingAnimation>
        <Scale Factor="1.3"/>
    </ActivatingAnimation>

    </Circle>

</PageIndicator>

</DockPanel>

The problem is that each time I change the value of my Observable, all the pages are not reloaded, the active page is kept and the new ones are added before it.

My observable binding looks like this

var GameToShow = Observable()

function LoadGameToShow(args){

  //GameToShow.clear() / Tried this, but no difference / 
  GameToShow.value = args.data
}

/ The data looks like this 

Games.add({
  title : "Game 1",
  image : "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRX1XlR4PmAXH8L4Pwt90LD-QmDiKj6PcKMK-Kp6L3u4g6BRkO0&quot;,
    gallery : [{url : "http://atelierscientifiquevernant.e-monsite.com/medias/images/paysage-montagneux.jpg"},
        {url : "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRX1XlR4PmAXH8L4Pwt90LD-QmDiKj6PcKMK-Kp6L3u4g6BRkO0"} ,
        {url : "http://i.ytimg.com/vi/X4XY7PGSJGs/hqdefault.jpg"} ],
  location : "London",
  description : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ",
  icons : [{url : "https://cdn2.iconfinder.com/data/icons/commerce-roundline/512/train-512.png"}, {url : "https://cdn2.iconfinder.com/data/icons/commerce-roundline/512/train-512.png"}],
  price :  "1$",
  longDesc : loremLong ,
}) 

/
2

I found my error by creating a new project from scratch just with this bit of code and was not able to reproduce my “bug”.

The problem was from a

ReuseExistingNode="false"

On the Parent HirarchicalNavigation

My code looks like this

<App Theme="Basic">

<JavaScript>
var Observable = require("FuseJS/Observable");

var Games = Observable()

Games.add({
    title : "Game 1",
    gallery : [
        {url : "http://atelierscientifiquevernant.e-monsite.com/medias/images/paysage-montagneux.jpg"},
    {url : "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRX1XlR4PmAXH8L4Pwt90LD-QmDiKj6PcKMK-Kp6L3u4g6BRkO0"} ,
    {url : "http://i.ytimg.com/vi/X4XY7PGSJGs/hqdefault.jpg"} ]
})
Games.add({
    title : "Game 2",
    gallery : [
        {url : "http://www.meininger-hotels.com/typo3temp/pics/5576e705b9.jpg"},
        {url : "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKbjz8PfeAEojSTxmuXq6v-FlpznRDtqVEMCTk3EpQKf0F1mePEw"} ,
        {url : "http://media-cdn.tripadvisor.com/media/photo-s/06/e5/55/c5/champs-elysees.jpg"} ]
})

Games.add({
    title : "Game 3",
    gallery : [{url : "http://www.fourseasons.com/content/dam/fourseasons/images/web/MOS/MOS_001_aspect16x9.jpg/jcr:content/renditions/cq5dam.web.637.358.jpeg"}, {url : "http://s.inyourpocket.com/gallery/117696.jpg"} ,{url : "http://www.publicdomainpictures.net/pictures/60000/nahled/view-towards-red-square-moscow.jpg"} ]
})

var GameToShow = Observable()
function LoadGameToShow(args){
  GameToShow.value = args.data
}

module.exports = {
    Games : Games,
    GameToShow : GameToShow,
    LoadGameToShow : LoadGameToShow
}

</JavaScript>
    <EdgeNavigator>
    <DockPanel>
    <Style>
    <Page Background="White">
            <EnteringAnimation>
                <Move X="1" RelativeTo="ParentSize" />
            </EnteringAnimation>
            <ExitingAnimation>
                <Move X="-1" RelativeTo="ParentSize" />
            </ExitingAnimation>
        </Page>
    </Style>
        <HierarchicalNavigation ux:Name="MainNav" Active="AllGames"/>
        <!-- the error was here -->

        <Panel Dock="Top" Color="#000" Height="30">
        <StateGroup ux:Name="PanelButton">

            <State ux:Name="RootPanelState">
            </State>
            <State ux:Name="ItemPanelState">

            <Panel Margin="7,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds" >
                <Text Value="Back" TextColor="#fff"/>
                <Clicked>
                    <NavigateTo Target="AllGames" NavigationContext="MainNav"/>
                    <Set PanelButton.Active="RootPanelState"/>
                </Clicked>

            </Panel>
            </State>

        </StateGroup>
        </Panel>

        <Page ux:Name="AllGames">
            <StackPanel ItemSpacing="15">
                <Each Items="{Games}">
                    <Text Value="{title}" Clicked="{LoadGameToShow}" TextAlignment="Center">
                        <Clicked>
                            <NavigateTo Target="GameGallery" NavigationContext="MainNav"/>
                            <Set PanelButton.Active="ItemPanelState"/>
                        </Clicked>
                    </Text>
                </Each>
            </StackPanel>
        </Page>

        <Page ux:Name="GameGallery">
            <StackPanel>
            <Text Value="{GameToShow.title}"/>

<DockPanel Height="250" ux:Name="parentContainer">

<PageControl ux:Name="pageControl" Layer="Background">
    <Each Items="{GameToShow.gallery}">
        <Page>

            <EnteringAnimation>
                <Move X="-1" RelativeTo="ParentSize"/>
            </EnteringAnimation>
        <ExitingAnimation>
            <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
        </ExitingAnimation>

        <Image Url="{url}" StretchMode="UniformToFill"/>

        </Page>
    </Each>

</PageControl>

<PageIndicator Navigation="pageControl" Dock="Bottom" Alignment="Center" >
    <Circle ux:Generate="Factory" ux:Binding="DotFactory"
            Fill="#343399" Margin="5,0,5,10"
            Width="10" Height="10" Opacity="0.4">

    <ActivatingAnimation>
        <Scale Factor="1.3"/>
    </ActivatingAnimation>

    </Circle>

</PageIndicator>

</DockPanel>

            </StackPanel>
        </Page>

    </DockPanel>
    </EdgeNavigator>
</App>