object-repeat

Version Compatibility

object-repeat was introduced in version 4.21.0 of the JourneyApps Container.

Alpha Feature

object-repeat is currently in alpha status. There are some known issues:

• Performance is slow, especially when used with OnlineDB.

• Nesting object-repeat inside another object-repeat does not work as expected.

• It is not possible to use an advanced query inside a nested object-table or object-list (e.g. sorting, or anything other than a direct has-many relationship on the object).

Issues that have been fixed:

• The data inside the object-repeat does not always reload properly when changed (e.g. after a sync). This was fixed in version 4.27 of the JourneyApps Container.

Syntax

<object-repeat query="myquery" as="item">
    <card>
        <content>{item.message}</content>
    </card>
    <button label="Read" on-press="$:item.read = true" />
</object-repeat>

Attribute	Description
query	The collection to loop over. (The same as, e.g., object-table) A view variable of type query: or array:
as	variable name to be used for the repeating object

Scoping

object-repeat creates a new “virtual scope” used for nested components. This specifically includes the current object, under the name specified in the as attribute. This is relevant for:

1. Shorthand expressions.

2. Parameters passed to JS functions.

Nesting

Most components are allowed to be nested, with some specific exceptions:

• columns/column

• sidebar

Please note:

• Nested object-repeat s are allowed, but do not currently function correctly.

More detailed example

<view>
  <var name="mytext" type="text" />
  <var name="myquery" type="query:item" />
  <object-repeat query="myquery" as="item">
    <card>
      <!-- View variables can be referenced in shorthand expressions,
      as well as `item`. -->
      <heading>{mytext}: {item.title}</heading>
      <content>{item.message}</content>
      <action on-press="myfunction(mytext, item)" />
    </card>
    <!-- `item` can be used in JS expressions. However, view variables need view. -->
    <button label="Read" on-press="$:myfunction(view.mytext, item)" />
  </object-repeat>
</view>

Performance notes

• Due to its complexity, object-repeat does not offer the same performance and speed than object-list and object-table. Therefore, it is recommended to keep the number of objects in your collection < 20, and never more than around 50.

• object-repeat is currently very slow when used with OnlineDB - the user will see items loading one by one. As a workaround, always use object-repeat with an array and not a query when using OnlineDB.