Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 = <pages.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
Expand All @@ -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.