adding backStackEntry example, including missing import md file text field (#5319)

This commit is contained in:
Nikolay Tsonev
2018-01-24 15:28:58 +02:00
committed by GitHub
parent b492996647
commit 9eb341bcb5
3 changed files with 34 additions and 4 deletions

View File

@ -20,3 +20,33 @@ To perform navigation, you will need a reference to the topmost frame of the app
### Navigating Back
{%snippet frame-back%}
### Back Navigation with BackstackEntry
Using the `BackstackEntry` allows us to navigate back to a specific page.
```XML
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Page 5" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<Label text="Page 5" class="h1 text-center"/>
<Button text="back to the first page" tap="onTap" class="btn btn-primary btn-active"/>
</StackLayout>
</Page>
```
```TypeScript
import {BackstackEntry, Frame} from "ui/frame"
export function backNavigation(args){
const backstackEntryFirstPage = args.object.page.frame.backStack[0];
const frame = args.object.page.frame;
frame.goBack(backstackEntryFirstPage);
}
```
With the help of the Frame we access the page's BackstackEntry by providing the the sequence number - `backStack[<page number>]`. In the example above we will navigate back to the initial page and to do that we need to take the first BackstackEntry as follow: `topmost().backStack[0]`
> NB: We start counting the pages from 0. If we need to take the entry for the first page we need to take the it while using the 0 index, for the second 1 index, etc.

View File

@ -16,11 +16,11 @@ import { Span } from "tns-core-modules/text/span";
import { TextField } from "tns-core-modules/ui/text-field";
// << require-textfield
// Other frequently used modules when working with buttons include:
// >> require-observable-binding-options-textfield
import { BindingOptions } from "tns-core-modules/ui/core/bindable";
// >> require-observable-textfield
import { Observable } from "tns-core-modules/data/observable";
// << require-observable-textfield
// << require-observable-binding-options-textfield
// ### Binding two TextFields text property to observable view-model property.
// >> binding-text-property-textfield

View File

@ -13,7 +13,7 @@ Using a TextField requires the text-field module.
{%raw%}<TextField text="{{ someProperty }}" />
<TextField text="{{ someProperty }}" />{%endraw%}
```
{%snippet binding-text-property-textfield%}
{%snippet require-observable-binding-options-textfield%}
## Creating a TextField
{%snippet creating-textfield%}
### Setting the text of a TextField