Items

The Items component maps sequential data items into component instances, representing each data item as a particular component.

The component provides context values with which you can access some internal properties:

• $isFirst: This boolean value indicates if the component renders its first item.
• $isLast: This boolean value indicates if the component renders its last item.
• $item: This value represents the current iteration item while the component renders its children.
• $itemIndex: This integer value represents the current iteration index (zero-based) while rendering children.

The Items component does not use virtualization; it maps each data item into a component. Thus, passing many items to a component instance will use many resources and slow down your app. If you plan to work with many items (more than a few dozen), use the List and Table components instead.

Inline Data

You can set the list of data to be rendered via the data property, as the following sample shows. The nested child component describes a template to display each data entry in Items. In the template, you can refer to a particular entry with the $item identifier:

<App>
  <VStack>
    <Items data="{[
      { idx: 1, value: 'One lion' },
      { idx: 2, value: 'Two monkeys' },
      { idx: 3, value: 'Three rabbits' },
    ]}">
      <Text>{$item.idx} - {$item.value}</Text>
    </Items>
  </VStack>
</App>

Data Binding

You can use also API bindings to display data:

<App>
  <VStack>
    <Items>
      <property name="data">
        <DataSource url="https://api.spacexdata.com/v3/rockets"/>
      </property>
      <Image height="80px" width="110px" fit="cover" src="{$item.flickr_images[0]}"/>
    </Items>
  </VStack>
</App>

Use children as Content Template

The itemTemplate property can be replaced by setting the item template component directly as the Items's child. In the following example, the two Items are functionally the same:

<App>
  <!-- This is the same -->
  <Items>
    <property name="itemTemplate">
      <Text>Template</Text>
    </property>
  </Items>
  <!-- As this -->
  <Items>
    <Text>Template</Text>
  </Items>
</App>

Properties

data

This property contains the list of data items (obtained from a data source) this component renders.

itemTemplate

The component template to display a single item

reverse

This property reverses the order in which data is mapped to template components.

<App>
  <VStack>
    <Items
      reverse="true"
      data="{[
        { idx: 1, value: 'One lion' },
        { idx: 2, value: 'Two monkeys' },
        { idx: 3, value: 'Three rabbits' },
      ]}">
      <Text>{$item.idx} - {$item.value}</Text>
    </Items>
  </VStack>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Items component does not support styling. You should style the container component that wraps Items. You can also style the individual items via specifying a template component.