How do I get my repeater.itemReady(...) text to show up consistently in preview?

Ask the community
,
1

I have a repeater that isn’t showing correctly in preview.

I manipulate the text with data from my dataset and from a wixData query, so I populate the repeater text with the following code:

export async function myRepeater_itemReady($item, itemData, index) {
    $item('#repeaterText').html = await buildHtml(...);
}

In the editor, it appears like this (all is good):

360×567 2.82 KB

On the website, it shows my built HTML just fine:

583×759 21.4 KB

But in preview, it looks like this:

307×591 3.67 KB

How do I get this to show up properly in preview?

2

Hi. I doubt someone will be able to answer this question without looking into the specific case in preview Vs live.

3

Excellent! How do I help someone look into the specific case?

4

Another thing:
If you use bind data from the database, you should know, that in preview mode it takes the data from the sandbox collection, so make sure the relevant data is in the sandbox as well.

5

Upon testing further I believe this is just a bug in the way Velo renders previews. It appears that it assumes that the rendering is already completed for the text fields that were rendered in the editor, and only runs the “Repeater_ItemReady(…)” events for any items not rendered in the editor.

Since the editor is limited to 12 items, and my dataset contains 17, only the last 5 “Repeater_ItemReady(…)” events run.

This is a bug. Since “Repeater_ItemReady(…)” doesn’t run in the editor, it MUST run on every line in the preview for the preview to be accurate.

6

I can’t say I understood the issue…

7

@jonatandor35 I thought i was the only one, who didn’t understand the issue :sweat_smile:

8

I’m sorry that I’m being unclear. Allow me to show how you can reproduce the error.

  1. Create a collection with more than 12 items.

540×773 22 KB

  1. Create a new page on your site.
  2. Add a repeater to your new page.
  3. Add a dataset attached to the new collection to your new page.
  4. Set the number of items to display to 20.
  5. Connect your dataset to your repeater.
  6. Make sure your repeater has at least 2 text fields.
  7. Attach one text field to a column of your dataset.
  8. Set the other text field to “This should disappear in preview”.
  9. Create an “itemReady” event for your repeater.
  10. In the “itemReady” event, set the second text field to “This should be visible in preview”.

736×550 30.7 KB

  1. Click Preview. The first twelve rows won’t change. The rows beyond will change.

738×571 6.63 KB

  1. Publish your site with it’s new page
  2. Sync your database to live
  3. View the live page. All fields will be populated with the text “This should be visible in preview”.

784×567 6.54 KB

The preview bug is in step 12. The itemReady event is not firing in preview.

9

You’re not doing it right.
I’m not sure what exactly you’re trying to do, but if you want the onItemReady() to run after the data gets bound via the editor connection, then you need to do something like this:

$w.onReady(() => {
    $w("#dataset1").onReady(() => {
        $w("#reapeater1").forEachItem(($item, itemData, index) => {
        $item("#text1").text = "something";
        }) 
    })
})
10

@jonatandor35 Thank you for this workaround.

To say I’m not doing it right is incorrect. This is exactly how binding ItemReady via the editor is expected to behave in preview (as evidenced by how it behaves in live). To have it behave otherwise is a bug.

11

@nate See the documentation ;
“Note: When using a dataset to populate the contents of your repeated items, the onItemReady() callback function is triggered before the dataset populates the values of your page elements. Therefore, element values that you set using onItemReady() may be overridden when the dataset is ready…”

That’s why you couldn’t do it your way.

12

@jonatandor35 As the documentation states:
“When the data property is set for the repeater, the onItemReady function is automatically triggered.”
This is what isn’t working in the Preview. If you’re suggesting that the data property is being set while I’m still in the editor , that design doesn’t meet my expectations. That would guarantee that preview and live will behave differently from each other.

For what it’s worth, I’m perfectly happy to accept that my expectations differ from the way Velo has been designed. My expectations are that the data property will be set after I press the preview link, which would allow preview to behave like live. The current behavior doesn’t meet those expectations.