From 4b4cce1e37bc2e6b0e991466cc1aedf64fe6cb8d Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 21 Apr 2018 15:22:35 +0300 Subject: [PATCH 1/5] Updated documentation --- .../docs/en/elements/components/list-view.md | 62 +++++++++++++------ 1 file changed, 43 insertions(+), 19 deletions(-) diff --git a/content/docs/en/elements/components/list-view.md b/content/docs/en/elements/components/list-view.md index 3445c2db..999ade4d 100644 --- a/content/docs/en/elements/components/list-view.md +++ b/content/docs/en/elements/components/list-view.md @@ -4,53 +4,77 @@ apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listv contributors: [MisterBrownRSA, rigor789, eddyverbruggen] --- -The ListView component shows items in a vertically scrolling list. You can set different `v-template`'s to specify how each item in the list should be displayed. +`` is a UI component that shows items in a vertically scrolling list. To set how the list shows its items, you can use the `` component. + +``` + // Iterates on every list item and attaches an itemTap event to it. + + + +``` --- +[> screenshots for=ListView <] + +## Using `` with `` + +The [`v-template` component](/en/docs/utilities/v-template) lets you determine how each list item is shown on the screen. + +If you need to visualize one or more list items differently than the rest, you can enclose them in additional `` blocks and use conditions. You can have as many `` blocks as needed within one ``. + ```html - + - - ``` -In the above example the second template will be used if the item's index is odd. -For convenience you can use `$index`, `$even` and `$odd` helpers, but as needed you can use any valid javascript expression for a `v-template`'s `if` condition. +When you create conditions for ``, you can use any valid JavaScript expression or any of the following helpers: + +* `$index` +* `$even` +* `$odd` -To learn more about the `v-template` component, head over to the [`v-template` documentation](/en/docs/utilities/v-template). +## Using `` with `v-for` -The ListView does not loop through the items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead it only creates the necessary views to display the currently visible items on the screen, and when scrolling it reuses the views that are already off-screen. This concept is called view recycling, and is commonly used in mobile applications to improve performance. This is important because you can't rely on event listeners attached inside the `v-template`, instead you should use the `itemTap` event which contains the index of the tapped item, as well as the actual item from the list. +When you use `` with [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for), you need to use the default `itemTap` event instead of attaching other event listeners. The `itemTap` event contains the index of the tapped item and the actual item from the list. -```js +```javascript onItemTap(event) { console.log(event.index) console.log(event.item) } ``` -[> screenshots for=ListView <] - ## Props -| name | type | description | +| Name | Type | Description | |------|------|-------------| -| `for` | `String` | The expression for iterating through the items, examples:
- `item in listOfItems`
- `(item, index) in listOfItems`
- `item in [1, 2, 3, 4, 5]` -| `items` | `Array` | An array of items to be displayed in the ListView. **Note**: This property is only for advanced use, we recommend using the `for` property in most cases. -| `separatorColor` | `Color` | Set the separator line color. Set to `transparent` to remove it. +| `for` | `String` | Provides the expression for iterating through the items.
For example:
  • item in listOfItems
  • (item, index) in listOfItems
  • item in [1, 2, 3, 4, 5]
+| `items` | `Array` | An array of items to be shown in the ``.
**This property is only for advanced use. Use the `for` property instead.** +| `separatorColor` | `Color` | Sets the separator line color. Set to `transparent` to remove it. ## Events -| name | description | +| Name | Description | |------|-------------| -| `itemTap`| Emitted when an item in the ListView has been tapped. To access the tapped item use `event.item`. +| `itemTap`| Emitted when an item in the `` is tapped. To access the tapped item, use `event.item`. + +## Methods + +| Name | Description | +|------|-------------| +| `refresh()` | Forces the `` to reload all its items. + +## Native component -## Native Component | Android | iOS | |---------|-----| -| android.widget.ListView | UITableView +| [`android.widget.ListView`](https://developer.android.com/reference/android/widget/ListView.html) | [`UITableView`](https://developer.apple.com/documentation/uikit/uitableview) From c9a4fb4417afa0cd986f4463d4c7c0fee05322f0 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 21 Apr 2018 15:33:08 +0300 Subject: [PATCH 2/5] Fixed syntax highlighting --- content/docs/en/elements/components/list-view.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/en/elements/components/list-view.md b/content/docs/en/elements/components/list-view.md index 999ade4d..953806be 100644 --- a/content/docs/en/elements/components/list-view.md +++ b/content/docs/en/elements/components/list-view.md @@ -6,7 +6,7 @@ contributors: [MisterBrownRSA, rigor789, eddyverbruggen] `` is a UI component that shows items in a vertically scrolling list. To set how the list shows its items, you can use the `` component. -``` +```html // Iterates on every list item and attaches an itemTap event to it.