Passing data through this.Parameter

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

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

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:
file

and this is the log console:
file

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…

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

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

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.

file

This is where the {tt} should show up:
file

This is my call:
file

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.

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?

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:
    file
    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.

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

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 :slight_smile:

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

To be very clear, you need to remove the <Page> wrapper around your <Notes> and let the <Notes> component be a direct child of the <Navigator>. The navigator sends the parameter only to its direct child.

file

I changed my “page” code to this, base on the hikr source code and still nothing showing on the
<text value="{id}"/>

I don’t think I follow completely your suggestion

Don’t change your page, change the navigator setup. It needs to look like this:

<Navigator>
    <CalendarControl ux:Template="firstPage" router="router" />
    <Calendar ux:Template="secondPage" router="router" />  
    <Notes ux:Template="thirdPage" router="router" />
    <Settings ux:Template="fourthPage" router="router" />
</Navigator> 
```

Ok… I figure it out and removed the tag from the Navigator and I do see the data.

But… How can I see this data inside a .js file?

Example

console.log(passed-data-variable);

You can’t do that synchronously, you have to subscribe to changes:

this.Parameter.onValueChanged(module, function(p) {
     console.log(p);
});

I did this and seems to work fine.

id.subscribe(module);

console.log(id.value);

I’m getting the value from the passed data.

Thanks for the patience and help. Sorry for giving you such a hard time.

That approach may work sometimes, but it’s not guaranteed to work for observables where the data arrives asynchronously (e.g. from a HTTP call).

No problem, it’s good to know what things users find difficult so we can improve documentation and examples.

What can i use instead of the subscribe(module) approach?

I just saw that it only give me data when i reset the app.

I just explained what you need to use in my previous post: .onValueChanged(module, function(p) { ..

var Timer = require("FuseJS/Timer"); //trying to use this to get data fast
var tt = this.Parameter;
var wd = tt.map(function(x) {
                return x.wd;
            });

Timer.create(function(){ //<-- this call only works once after restarting the app preview
	getP(); // 
},300,false);



function getP(){ //<- this one works every time but only when clicked on a button inside the view
	console.log(wd.value);

}

module.exports = {
	wd:wd,
	getP:getP
}

Some findings…

Anders Lassen wrote:

I just explained what you need to use in my previous post: .onValueChanged(module, function(p) { ..
I forgot about this one.

Thanks again.

This is for anyone that has the same issue:
This worked for me:

this.Parameter.onValueChanged(module,function(x){
Timer.create(function(){
		getP();
	},300,false);
});
function getP(){
	console.log(wd.value);
}

I’m getting the value constantly on the view and also on the .js file where some processing is going to be done.

Thanks again for the support…!!