deblan
/
nativescript-docs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #95 from NativeScript/repeater-docs 

Repeater docs added
This commit is contained in:
Vladimir Enchev 2015-05-25 17:51:25 +03:00
parent d2e0ed12d7 158febfd23
commit ddb62ea0f8
1 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
layouts.md
View File

@ -109,6 +109,48 @@ The following table shows predefined layouts that NativeScript provides.
| [StackLayout][StackLayout] | This layout arranges its children horizontally or vertically. The direction is set with the orientation property. | ![StackLayout android](http://docs.nativescript.org/img/gallery/android/stackLayoutPage.png "StackLayout android")|
| [WrapLayout][WrapLayout] | This layout positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them on a new row or column. | ![WrapLayout android](http://docs.nativescript.org/img/gallery/android/wrapLayoutPage.png "WrapLayout android")|
### Repeating layout children
In this sample `main-page.xml`, the [Repeater](./ApiReference/ui/repeater/HOW-TO.md) with [WrapLayout](./ApiReference/ui/layouts/wrap-layout/HOW-TO.md) inside [ScrollView](./ApiReference/ui/scroll-view/HOW-TO.md) will create [Label](./ApiReference/ui/label/HOW-TO.md) from template for each item in `myItems` array.
```XML
<Page>
{%raw%}<ScrollView>
<Repeater items="{{ myItems }}">
<Repeater.itemsLayout>
<WrapLayout />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ name }}" margin="10" />
</Repeater.itemTemplate>
</Repeater>
</ScrollView>{%endraw%}
</Page>
```
The sample `main-page.js` or `main-page.ts` populates the `bindingContext` for the page. In this case, the code sets values for the name property for each label.
```JavaScript
var view = require("ui/core/view");
function pageLoaded(args) {
var page = args.object;
page.bindingContext = { myItems: [{ name: "Name1" }, { name: "Name2" }, { name: "Name3" }] };
}
exports.pageLoaded = pageLoaded;
```
```TypeScript
import observable = require("data/observable");
import pages = require("ui/page");
import view = require("ui/core/view");
import listView = require("ui/list-view");
import label = require("ui/label");
export function pageLoaded(args: observable.EventData) {
var page = <pages.Page>args.object;
page.bindingContext = { myItems: [{ name: "Name1" }, { name: "Name2" }, { name: "Name3" }] };
}
```
[views]: ui-views.md
[View]: ./ApiReference/ui/core/view/View.md
[Layout]: ./ApiReference/ui/layouts/layout/Layout.md