# Pass an object with observables to another page

**URL:** https://forums.fusetools.com/t/pass-an-object-with-observables-to-another-page/2026
**Category:** How-to Discussions
**Created:** [November 30, 2017, 10:09pm UTC](https://forums.fusetools.com/t/pass-an-object-with-observables-to-another-page/2026 "2017-11-30T22:09:21Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Morten](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Morten](https://forums.fusetools.com/u/Morten)
#### Post date: [November 30, 2017, 10:09pm UTC](https://forums.fusetools.com/t/pass-an-object-with-observables-to-another-page/2026/1 "2017-11-30T22:09:21Z")

</div>

Hi

I am building an app much like the hikr tutorial where each hike is an instance of a javascript class containing an observable property and when I click on a certain hike I want to go to another page but still accessing the instance of the chosen hike.

Code-wise I want to do the following:

```auto
<App>

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

		var allInstances = Observable();

		function myClass() {
			this.myProperty = Math.floor((Math.random() * 100) + 1);
			this.myObservableProperty = Observable(0);
		}

		function addInstance() {
			allInstances.add(new myClass());
		}

		Timer.create(function() {
		    allInstances.forEach(function(instance) {
		    	instance.myObservableProperty.value += 1;
		    })
		}, 1000, true);

		function goToPage(instance) {
			router.push("page2",instance.data);
		}

		module.exports = {
			allInstances: allInstances,
			addInstance: addInstance,
			goToPage: goToPage
		}
	</JavaScript>

	<Router ux:Name="router" />
	
	<Navigator DefaultPath="page1">
		<Page1 ux:Template="page1" router="router" />
		<Page2 ux:Template="page2" router="router" />
	</Navigator>

	<Page ux:Class="Page1">
		<Router ux:Dependency="router" />
		<StackPanel>
			<Button Text="Add an instance" Clicked="{addInstance}" />
			<Each Items="{allInstances}">
				<Text Value="{myProperty}" />
				<Text Value="{myObservableProperty}" />
				<Button Text="Go to page" Clicked="{goToPage}" />
			</Each>
		</StackPanel>
	</Page>

	<Page ux:Class="Page2">
		<Router ux:Dependency="router" />

		<JavaScript>
			var passedInstance = this.Parameter;

			module.exports = {
				passedInstance: passedInstance
			}
		</JavaScript>
		<Text Value="{passedInstance.myObservableProperty}" />
	</Page>

</App>

```

I am not sure it is possible but does anyone have any idea of how it could be done?

Best regards

Morten

---

<div class="post-metadata">

### Author: ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)
#### Post date: [December 1, 2017, 12:23pm UTC](https://forums.fusetools.com/t/pass-an-object-with-observables-to-another-page/2026/2 "2017-12-01T12:23:14Z")

</div>

Hi Morten.

The best approach here would be to have a single source of truth and to avoid passing around arbitrary, complex objects.

You should have a model for the data, and only pass around an ID, which you can then use to poll data from that same model from any other viewmodel.

To understand how MVVM pattern applies to Fuse apps, please [start here](https://www.fusetools.com/community/forums/howto_discussions/global_observable_from_parent_to_children?page=1&highlight=168b12b0-bf30-43c3-a561-8c38ad2eb0df#post-168b12b0-bf30-43c3-a561-8c38ad2eb0df) and follow the links for details.

---

<div class="post-metadata">

### Author: ![Morten](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Morten](https://forums.fusetools.com/u/Morten)
#### Post date: [December 3, 2017, 4:44pm UTC](https://forums.fusetools.com/t/pass-an-object-with-observables-to-another-page/2026/3 "2017-12-03T16:44:29Z")

</div>

Hi Uldis

Perfect! That was exactly what I was looking for but did not know that `require` could pass the object with an observable in that way. Thanks for the great help. It is very much appreciated.

Best regards

Morten