Passing data through this.Parameter

[Fahad]

Hey,

Using this.Parameter to pass on changing data to a page doesn’t seem to work at all in any way.

this.Parameter.map(function(param) { return param })
just returns a blank observable

this.Parameter.onValueChanged(module, function(param) { return param }) actually works first time, and then never updates, am I missing something here? What is module?

this.onParameterChanged(function(param) {..}) is deprecated and never properly worked anyway.

What’s going on.

P.S: this.Parameter.onValueChanged is missing from the docs, we’re still on this.onParameterChanged(function(param) {..})

Update: Uploaded file on the dropbox, here are the steps to reproduce:

1. Click on the Dumbbell on the tab bar

2. Click the small “+” button and create 2 routines (different names)

3. Open one of the routines, tap the “+” button to create a new workout

4. Give it any name and add any exercise then tap “Finish”

5. Tab the Dumbbell again to return to the routines page, then tap one of the routines, go back and tap the other

Relevant files:

• MainView.ux: router is established here
• WorkoutsListPage.ux: contains a Navigator for pages within the main PageControl
• RoutinesPage.ux
• WorkoutsPage.ux

Thanks

[Anders_Lassen]

Hi!

this.Parameter.map() works fine. However, as always, observables don’t propagate any data until you subscribe to them.

There are three ways to subscribe to something:

1. Use it somewhere in your module.exports (most recommended way)
2. Use a .onValueChanged(module, function(value) { ...
3. Use a .addSubscriber(function() { .. (not recommended unless you have a strategy for when to call .removeSubscriber(), otherwise this will leak)

onValueChanged will be called if the value ever changes for that same page instance. Note that Navigator may choose to recycle the page and create a new one instead of updating the parameter for a given page.

module is a variable that identifies the current module being evaluated. Passing this to onValueChanged ensures that the associated subscription is released along with the module (to avoid subscription leaks).

If you still think there is a bug here, a test case demonstrating this problem would be appreciated.

[Fahad]

Thanks for your reply,

Can you give me an example of how to properly pass data to a page, where the data could be changing every time that page opens? this.Parameter.map always seems to come up empty.

Edit: After further testing, I believe my project has some bug in particular, I have tried to reproduce it in a small example, but I’ve not had much luck, if anyone can help me with my specific project I’d appreciate it. Thanks

[Fahad]

Still waiting on someone to check out my project? I’m convinced this is a bug but I can’t reproduce a minimal test case, if anyone has time, I’d really appreciate it.

Cheers

[Anders_Lassen]

Hi Fudge,

Thanks for the test case!

I debugged it and found that your particular setup triggers a bug in Fuse when pages are reused. I have a fix on the way that will roll out in an upcoming release.

Meanwhile, a simple work-around is to put Reuse="None" on the page, and it should work like a charm.

Best regards,
Anders

[Fahad]

Hey Anders,

That worked perfectly, thanks for spending the time to debug it

Cheers,
Fahad

[Javier_Camacho]

I just tried to use

this.Parameter

and its just a empty Observable.

I’m trying to pass a simple string to another page and nothing.

I’m about to finish a project and looks like I’ll have to redo EVERYTHING on RN just because i can’t pass data…

[Javier_Camacho]

THIS:

var tt = this.Parameter.map(function(param){
	console.log("PARAM "+param); //<-- the code never enters here.
	return param.tst;
})

Won’t even work…

Sender code from another js

var tst = {
		name:"JAVi",
		edad: "37"
	};
	function saveNote(arg){
		console.log(tst.name);
		Timer.create(function(){
			console.log("KABOOM");
			router.push("thirdPage",{tst});
		},300,false);
	}

Again… great product but it just…

[Anders_Lassen]

Javier: Observables don’t propagate data unless they are subscribed. This is the same in every other reactive framework.

The quickest way would be to simply tt.subscribe(module), but it’s more useful to keep .map()'ing on the observable until you have data to put in module.exports. Everything exported from the module is automatically subscribed.

[Javier_Camacho]

Sir. I’ve try to use the observable on a ux file and nothing happens.

I even try to follow and use the example on the hikr app and also I can’t use it for anything.

[Javier_Camacho]

The last thing I’ll try is the
tt.subscribe(module)

If you are so kind. Can you provide a FULL CODE SNIPPED showing how to use this.

The hikr source code will no be enough.

Fyi: If this doesn’t work. I’ll have to stop this project and move everything to another framework.

[Bent]

Javier: if you are still having issues, please post a minimal test case that reproduces your issue, otherwise it’s almost impossible to help you any further than the explanation Anders posted above.

You can use our Dropbox to send us a ZIP with a self contained project (please delete your build folder(s) before archiving, since they are not necessary and only add size to the ZIP-file).

[Javier_Camacho]

this is a function that passes data to another js file.
this function is on a file called cal.js

“thirdPage” is a ux file that calls notes.js inside a javascript tag.

The notes.js files all it has is this:

var Observable = require("FuseJS/Observable");
var tt = this.Parameter.map(function(p){
	return p.id;
})

tt.subscribe(module);

console.log(tt);

module.exports = {
	tt:tt
}

on the ux file i called the tt observable:

and this is the log console:

On the view, where i placed the {tt} the text went missing.

Do you need more details? Mr. Bent Stamnes?

FYI: I have called that “tt” variable in many different ways…

[Anders_Lassen]

Javier: Your code should work. Of course, console.log won’t print anything because the value is not available synchronously, but the UI should display the text.

Here is a complete example that works:

<App>
	<Router ux:Name="router" />
	<JavaScript>
		function button_clicked() {
			router.goto("foo", {id : 123})
		}
		module.exports = { button_clicked };
	</JavaScript>
	<Navigator DefaultPath="bar">
		<Page ux:Template="bar">
			<Button Text="goto foo" Clicked="{button_clicked}" />
		</Page>
		<FooPage ux:Template="foo" />
	</Navigator>

	<Page ux:Class="FooPage">
		<JavaScript>
			var tt = this.Parameter.map(function(p) {
				return p.id;
			});

			module.exports = { tt }
		</JavaScript>
		<Text Value="{tt}" />
	</Page>
</App>```

[Anders_Lassen]

Text interpolation, as in placing {tt} in the middle of a <Text Value="..." />, as you are trying to do in your code, is only supported starting in version 0.31.

You can download that version here: https://www.fusetools.com/downloads/channel/qa

[Javier_Camacho]

Thanks for you effort but still won’t work.

I did exactly what you posted here, and still can’t pass data from cal.js to notes.js or to even notesview.ux and calling the javascript directly inside the ux.

This is where the {tt} should show up:

This is my call:

I have nothing left to say but, thanks for trying and good luck with the release. Maybe in the future this works for me.

I’ll be using localStorage to be able to pass data around until we make a team decision regarding Fuse framework.

[Anders_Lassen]

Hi again,

I see nothing wrong with the pieces of code you have pasted, so there must be something else.

If you zip down your project and upload here: https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK - the upload will only go to the Fuse support crew and not be spread publicly.

We can take a look and figure out why this isn’t working in your particular case. Sorry for the trouble!

I am pretty sure there is something wrong with your Navigator setup. Is Notes a page template directly in the navigator?

[Javier_Camacho]

Sir… thanks for your help but this code has some very delicate data and it will take quite some time to be able to remove and send to you.

This are my files;

1. MainView.ux: this is where I’m declaring the Navigator:
   
   This is inside a side panel.

2. The second template called Notes or “thirdPage” sends the router to this file NoteView.ux

3. The router call is been done inside the Calendar or “secondPage”. This call is from a file called cal.js

4. NoteView.ux has a file call Notes.js
   This is where I’m trying to get the Parameter from the router call.

I hope this helps. Like I said, thanks, but time and security is a problem.

[Javier_Camacho]

I downloaded the hikr source code and I’m not doing anything different in terms of passing data.

[Anders_Lassen]

The problem is that you have wrapped your component in a page.

When you say this.Parameter inside Notes the this refers to the component inside, not the page itself. The parameter is sent to the page, not the components inside.

This should fix your problem (for good):

<Navigator>
      ...
      <Notes ux:Template="thirdPage" router="router" />
      ...

Do the same for all pages, and you should be good to go

Apologies that this wasn’t made more clear in the tutorials/docs.