Pass an object with observables to another page

How-to Discussions
1

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:

<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

2

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 and follow the links for details.

3

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