navigation inside an item and stategroup

[_Kobo]

Hi guys , i’m facing little issue.
i have my data looped with each method, and i 'm navigated inside them using this code.

					var DonsDetailsData = Observable()
					function goToDonsDetails(arg){
						router.push("DonsDetails")
						DonsDetailsData.value = arg.data
					}

datas are displayed properly but when it comme to handle state group or whiletrue for each one of them, things doesn’t work.
this is how i’m exporting my data

module.exports: {
  DonsDetailsData: DonsDetailsData.map(function(x) {
  var stateGroupValue = Observable(function(x){
    return "locked"
  })
  return {
   id: x.id,
   stateGroupValue: stateGroupValue
    }
})
}

for handling stategroup when i dont navigate inside things works properly , but when i navigate inside , things doesn’t work , can anyone take time to teach me how i can do please

[Anders_Lassen]

Hi,

Sorry, I’m not able to understand your question. Can you please explain a bit more carefully what “doesn’t work” ?

[_Kobo]

this is what my code looks like, i have figure it out , but i continue to have a little issue

so i’m navigating into an item page , and try to click to the button inside , this button is supposed to only fire the whiletrue method for this specific page, so its works , but when i navigate into an another page , the while true method is active for 1s and disappear after . the same approach dont work with stategroup

<App>
	<Router ux:Name="router" />
	<JavaScript>
	var Observable = require("FuseJS/Observable");

	var pages = Observable()
 	var data = Observable(
		{name: "qsoiuzeoi"},
		{name: "dsfsf"},
		{name: "qslkj"}
	)

	var navigationData = Observable()
	function NavigateTo(arg){
		navigationData.value = arg.data
		router.push("barB")
	}

	function goBack(){
		router.goBack()
	}
	var openRectangle = Observable(false)

	function setOpenTrue(){
		openRectangle.value = true
	}

	module.exports = {
		data: data,
		NavigateTo: NavigateTo,
		navigationData: navigationData.map(function(x){
			var openRectangle = Observable(function(x){
				return x == false
			})
			return {
				name: x.name,
				openRectangle: openRectangle,
				setOpenTrue: function(){
					openRectangle.value = true
				}

			}
		}),
		goBack: goBack,
		openRectangle: openRectangle,
		setOpenTrue: setOpenTrue
	}
	</JavaScript>

	<ClientPanel ux:Class="homepage">
	  <Router ux:Dependency="router" />
	  <DockPanel Dock="Top" Height="50" Color="Green">
	  </DockPanel>
	  <ScrollView>
	    <StackPanel>
	      <Each Items="{data}">
	        <Rectangle Height="50" Width="100%" Color="Black">
	          <Clicked Handler="{NavigateTo}"/>
	        </Rectangle>
	      </Each>
	    </StackPanel>
	  </ScrollView>
	</ClientPanel>

	<ClientPanel ux:Class="barBach">
		  <Router ux:Dependency="router" />
		  <DockPanel Height="50" Dock="Top" Color="Yellow">
		    <Clicked Handler="{goBack}"/>
		  </DockPanel>

			<StackPanel>
				<Text Value='{navigationData.name}' HitTestMode='LocalBounds'/>

				<Rectangle Height="50" Width="140" CornerRadius="10" Color="#f15f5f" Margin="0,40,0,0">
				<Text Value="Click" TextColor="White" TextAlignment="Center" Alignment="Center"/>
					<Clicked Handler="{navigationData.setOpenTrue}">
						<Scale Factor="0.96" Duration="0.5" Easing="QuadraticIn"/>
					</Clicked>
				</Rectangle>
			</StackPanel>

		  <Rectangle Visibility="Collapsed" Opacity="0" ux:Name="lala" Dock="Bottom" Margin="0,0,0,10" CornerRadius="10" Height="60" Width="96%" Color="Red">

		  </Rectangle>

		  <WhileTrue Value="{navigationData.openRectangle}">
		    <Change lala.Visibility="Visible" Easing="QuadraticIn" Duration="0.6"/>
		    <Change lala.Opacity="1" Easing="QuadraticIn" Duration="0.6"/>
		  </WhileTrue>
	</ClientPanel>

	<Navigator DefaultTemplate="home">
		<barBach ux:Template="barB" router="router"/>
		<homepage ux:Template="home" router="router"/>
	</Navigator>
</App>

[Anders_Lassen]

The <JavaScript> here is outside the page, so it is global for the entire app.

If you want the javascript to be local to a specific page, put it inside the page class.

[_Kobo]

Already tested, it continue to be global.
works only when pages are not generated with each + navigation inside

this is what the code looks like

<ClientPanel ux:Class="barBach">
  <JavaScript File="lagou.js"/>
    <Router ux:Dependency="router" />
    <DockPanel Height="50" Dock="Top" Color="Yellow">
      <Clicked Handler="{goBack}"/>
    </DockPanel>

    <StackPanel>
      <Text Value='{navigationData.name}' HitTestMode='LocalBounds'/>

      <Rectangle Height="50" Width="140" CornerRadius="10" Color="#f15f5f" Margin="0,40,0,0">
      <Text Value="Click" TextColor="White" TextAlignment="Center" Alignment="Center"/>
        <Clicked Handler="{setOpenTrue}">
          <Scale Factor="0.96" Duration="0.5" Easing="QuadraticIn"/>
        </Clicked>
      </Rectangle>
    </StackPanel>

    <Rectangle Visibility="Collapsed" Opacity="0" ux:Name="lala" Dock="Bottom" Margin="0,0,0,10" CornerRadius="10" Height="60" Width="96%" Color="Red">

    </Rectangle>

    <WhileTrue Value="{openRectangle}">
      <Change lala.Visibility="Visible" Easing="QuadraticIn" Duration="0.6"/>
      <Change lala.Opacity="1" Easing="QuadraticIn" Duration="0.6"/>
    </WhileTrue>
</ClientPanel>

[Anders_Lassen]

If you put the JS inside, it is not global. I can’t see anything wrong with your code, so please provide a complete, working test case

[_Kobo]

By global i mean it continue to fire all the whiletrue inside each pages generated by the each method , when i just want to fire the whiletrue inside the specific page i navigated inside.
my code sended earlier is complete , its the isolation of the issue.

thanx

[Anders_Lassen]

The code you sent earlier has <JavaScript> on the root level, so that will obviously fail.

Please provide a reproduction where <JavaScript> is per page.

[_Kobo]

<App>
	<Router ux:Name="router" />
	<JavaScript>
	var Observable = require("FuseJS/Observable");

	var pages = Observable()
 	var data = Observable(
		{name: "qsoiuzeoi"},
		{name: "dsfsf"},
		{name: "qslkj"}
	)

	var navigationData = Observable()
	function NavigateTo(arg){
		navigationData.value = arg.data
		router.push("barB")
	}



	function goBack(){
		router.goBack()
	}


	module.exports = {
		data: data,
		NavigateTo: NavigateTo,
		navigationData: navigationData.map(function(x){
			var openRectangle = Observable(function(x){
				return x == false
			})
			return {
				name: x.name,
				openRectangle: openRectangle,
				setOpenTrue: function(){
					openRectangle.value = true
				}

			}
		}),
		goBack: goBack,
	}
	</JavaScript>

	<ClientPanel ux:Class="homepage">
	  <Router ux:Dependency="router" />
	  <DockPanel Dock="Top" Height="50" Color="Green">
	  </DockPanel>
	  <ScrollView>
	    <StackPanel>
	      <Each Items="{data}">
	        <Rectangle Height="50" Width="100%" Color="Black">
	          <Clicked Handler="{NavigateTo}"/>
	        </Rectangle>
	      </Each>
	    </StackPanel>
	  </ScrollView>

		<Panel Height="30"/>

		<ScrollView AllowedScrollDirections="Horizontal">
		<StackPanel Orientation="Horizontal">
			<Each Items="{data}">
				<Circle ux:Name="Selectionbuddy" Width="60" Color="Green" HitTestMode="LocalBounds" Margin="5,0,0,0">
					<string ux:Property="Title"/>
					<string ux:Property="Ingredients"/>
					<Selectable  />
					<WhileSelected>
						<Change Selectionbuddy.Color="Red" Easing="QuadraticIn" Duration="0.4"/>
					</WhileSelected>
					<Clicked>
						<ToggleSelection/>
						<Scale Factor="0.7" Duration="0.5"/>
						<DebugAction Message="qdqzda"/>
					</Clicked>
				</Circle>
			<Selection MinCount="1" MaxCount="1" ux:Name="PizzaSel"/>
			</Each>
		</StackPanel>
		</ScrollView>
	</ClientPanel>

	<ClientPanel ux:Class="barBach">
	  <JavaScript File="lagou.js"/>
	    <Router ux:Dependency="router" />
	    <DockPanel Height="50" Dock="Top" Color="Yellow">
	      <Clicked Handler="{goBack}"/>
	    </DockPanel>

	    <StackPanel>
	      <Text Value='{navigationData.name}' HitTestMode='LocalBounds'/>

	      <Rectangle Height="50" Width="140" CornerRadius="10" Color="#f15f5f" Margin="0,40,0,0">
	      <Text Value="Click" TextColor="White" TextAlignment="Center" Alignment="Center"/>
	        <Clicked Handler="{setOpenTrue}">
	          <Scale Factor="0.96" Duration="0.5" Easing="QuadraticIn"/>
	        </Clicked>
	      </Rectangle>
	    </StackPanel>

	    <Rectangle Visibility="Collapsed" Opacity="0" ux:Name="lala" Dock="Bottom" Margin="0,0,0,10" CornerRadius="10" Height="60" Width="96%" Color="Red">

	    </Rectangle>

	    <WhileTrue Value="{openRectangle}">
	      <Change lala.Visibility="Visible" Easing="QuadraticIn" Duration="0.6"/>
	      <Change lala.Opacity="1" Easing="QuadraticIn" Duration="0.6"/>
	    </WhileTrue>
	</ClientPanel>

	<Navigator DefaultTemplate="home">
		<barBach ux:Template="barB" router="router"/>
		<homepage ux:Template="home" router="router"/>
	</Navigator>
</App>

the separate js for the page navigated inside.

var Observable = require("FuseJS/Observable");
var openRectangle = Observable(false)




function setOpenTrue(){
  openRectangle.value = true
}



module.exports = {
  openRectangle: openRectangle,
  setOpenTrue: setOpenTrue
}

as you see i only use the method into the separate file , its produce the same effect as earlier

[Anders_Lassen]

The data is now local to the page (took me a while to figure out, your navigationData thing is confusing).

You are navigating back and forth between the same two pages, so data local to that page will stick around. To avoid that specify Reuse="None" on the page

<ClientPanel ux:Class="barBach" Reuse="None">

[_Kobo]

Problem solved thank you