From 9982dab86e0ece041906b8d47e5f1de2ad7773f9 Mon Sep 17 00:00:00 2001 From: Rossen Hristov Date: Tue, 13 Jan 2015 14:34:34 +0200 Subject: [PATCH] Updated navigation article. --- navigation.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/navigation.md b/navigation.md index 1608c1275..7f61ed5ca 100644 --- a/navigation.md +++ b/navigation.md @@ -125,7 +125,7 @@ var navigationEntry = { topmost.navigate(navigationEntry); ``` #Navigating to another page and passing context -Sometimes, the page being navigated to would have to receive information about the context in which this navigation happened. The bese example would be a master-details scenario where there are two pages -- the main page containing a list of some entities and a details page which provides details about a particular entity. In this case, when navigating to the details page it is mandatory to transfer some primary key or ID information about the entity the details page should show. This is done with the help of the **context** property of a NavigationEntry: +Sometimes, the page being navigated to would have to receive information about the context in which this navigation happened. The best example would be a master-details scenario where there are two pages -- the main page containing a list of some entities and a details page which provides details about a particular entity. In this case, when navigating to the details page it is mandatory to transfer some primary key or ID information about the entity the details page should show. This is done with the help of the **context** property of a NavigationEntry: ``` JavaScript function listViewItemTap(args) { frames.topmost().navigate({ @@ -143,6 +143,21 @@ export function listViewItemTap(args: listView.ItemEventData) { }); } ``` +Once you pass this information, the best place to retrieve it and act accordingly is in the **onNavigatedTo** callback of the details page: +``` JavaScript +function pageNavigatedTo(args) { + var page = args.object; + page.bindingContext = page.navigationContext; +} +``` +``` TypeScript +// Event handler for Page "navigatedTo" event attached in details-page.xml +export function pageNavigatedTo(args: observable.EventData) { + // Get the event sender + var page = args.object; + page.bindingContext = page.navigationContext; +} +``` #Navigating Back The topmost frame keeps track of the pages the user has visited in a navigation stack. To go back to a previous page you should use the **goBackMethod** of the topmost frame instance: ``` JavaScript @@ -152,5 +167,4 @@ topmost.goBack(); topmost.goBack(); ``` #Alternatives -Alternatively, if you do not want to have different pages and navigate beteen them, you can have a single page with a TabView. You can define a different UI for each tab and when the user selects a certain tab he will be presented with this UI. - +Alternatively, if you do not want to have different pages and navigate beteen them, you can have a single page with a TabView. You can define a different UI for each tab and when the user selects a certain tab he will be presented with this UI. \ No newline at end of file