Call event after page is loaded

How-to Discussions
1

Hi,

i have following situation:

  1. step … i send value from Page A to Page B: router.goto(‘pageB’, { id: id.value, url: url.value });
  2. step … then i get these params in Page B:
var id = this.Parameter.map(function(param) {
    return param.id;
});
var url = this.Parameter.map(function(param) {
    return param.url;
});
  1. step … and now, i need call some function in Page B … which make fetch by url and by id and show result on this Page B

Exist some solution for this example ?

Thnx

2

Yes.

this.Parameter.onValueChanged(module, function(param) {
  someFunction(param.id, param.url);
});

function someFunction(id, url) {
  // ...
};
3

Ok, this is good in situation, when data in these params has changed. This works me.
But how will this event triggered, when value has not been changed ?

4

It won’t, since it’s only fired when the data changes. Which is correct.

If you need to do something every time you open a given page, consider using an <Activated> trigger with a callback to another function.

5

Uldis wrote:

It won’t, since it’s only fired when the data changes. Which is correct.

If you need to do something every time you open a given page, considering using an <Activated> trigger with a callback to another function.

Can you please make an example of this? i have the same problem with url and id from the post content, but i want to fetch the url evertytime i load the page/view.

6

Okay, here’s my humble take on that. I must note that I’m kind of assuming that the Activated trigger always gets called after the this.Parameter Observable has already changed its value, which, according to my experience, is always the case.

I would love if fuse team would comment on that assumption ^^^ and/or suggest a better approach.

Please note that I’d usually split the components over a number of files, and am not doing that here because it’s easier to post (and comprehend) it all as a single piece.

Without further ado, here it is:

<App Background="#eee">

	<Router ux:Name="router" />

	<Panel ux:Class="MainPage">
		<Router ux:Dependency="router" />
		<JavaScript>
			var Observable = require('FuseJS/Observable');
			var items = Observable();
			for (var i = 1; i <= 5; i++) {
				items.add({'id':i, 'url':'http://google.com/'+i});
			}

			function gotoPage(args) {
				router.push('subPage', args.data);
			};

			module.exports = {
				'items': items,
				'gotoPage': gotoPage
			};
		</JavaScript>

		<StackPanel ItemSpacing="3" Margin="3">
			<Each Items="{items}">
				<Panel Height="60" Background="#fff" HitTestMode="LocalBoundsAndChildren">
					<Text Alignment="Center" Value="{id}" Color="#000" />
					<Clicked>
						<Callback Handler="{gotoPage}" />
					</Clicked>
				</Panel>
			</Each>
		</StackPanel>
	</Panel>

	<Panel ux:Class="SubPage">
		<Router ux:Dependency="router" />
		<JavaScript>
			var id = 0;
			var url = '';

			this.Parameter.onValueChanged(module, function(param) {
				id = param.id;
				url = param.url;
			});

			function onActivated(args) {
				console.log('YO! How about we get the URL ' + url + ' for ID ' + id + '?');
				// ...
			};

			function goBack() {
				router.goBack();
			};

			module.exports = {
				'onActivated': onActivated,
				'goBack': goBack
			}
		</JavaScript>

		<Activated>
			<Callback Handler="{onActivated}" />
		</Activated>

		<Panel Alignment="Top" Height="60" Background="#fff" HitTestMode="LocalBoundsAndChildren">
			<Text Alignment="Center" Value="Go Back" Color="#000" />
			<Clicked>
				<Callback Handler="{goBack}" />
			</Clicked>
		</Panel>
	</Panel>

	<Navigator DefaultTemplate="mainPage">

		<MainPage ux:Template="mainPage" router="router" />
		<SubPage ux:Template="subPage" router="router" />

	</Navigator>

</App>