# navigation inside an item and stategroup 

**URL:** <https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848>\
**Category:** How-to Discussions\
**Created:** [September 22, 2016, 1:41pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848 "2016-09-22T13:41:21Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 22, 2016, 1:41pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/1 "2016-09-22T13:41:21Z")

</div>

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

```auto
					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

```auto
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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 29, 2016, 11:45am UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/2 "2016-09-29T11:45:55Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 29, 2016, 1:01pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/3 "2016-09-29T13:01:36Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 29, 2016, 2:01pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/4 "2016-09-29T14:01:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 29, 2016, 2:13pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/5 "2016-09-29T14:13:35Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 29, 2016, 2:14pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/6 "2016-09-29T14:14:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 29, 2016, 2:25pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/7 "2016-09-29T14:25:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 29, 2016, 2:26pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/8 "2016-09-29T14:26:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 29, 2016, 2:40pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/9 "2016-09-29T14:40:02Z")

</div>

```auto
<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.

```auto
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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 29, 2016, 2:49pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/10 "2016-09-29T14:49:59Z")

</div>

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">
```

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [September 29, 2016, 2:54pm UTC](https://forums.fusetools.com/t/navigation-inside-an-item-and-stategroup/5848/11 "2016-09-29T14:54:10Z")

</div>

Problem solved thank you