Currently, I am tasked with maintaining a code snippet that resembles the following structure:
{#await details}
{#each values as value, i}
<td id="{`${config.id}_${i}`}">{value}</td>
{/each}
{:then details_result}
{#each details_result as detail, i}
<td id="{`${config.id}_${i}`}" class:detail="{detail.class}">{detail.value}</td>
{/each}
{/await}
The challenge at hand involves binding events to these <td> elements using jQuery (specifically bootstrap popovers). However, I am encountering difficulties determining when exactly to perform this event binding due to Svelte's removal and replacement of the <td> elements within the #await block upon executing the :then clause.
Initially, my attempts involved employing Svelte's afterUpdate function for event binding. Regrettably, this proved ineffective as the function executes only after the placement of <td> elements within the #await block, failing to trigger for :then instances.
afterUpdate(() => {
values.forEach((value, i) => { $(`#${config.id}_${i}`).popover(); });
})
I next explored binding events within the then() onFulfilled function of the details promise. Despite ensuring that event binding occurs post-promise resolution, Svelte fails to update the DOM with the new <td> elements, consequently retaining bindings to the old elements.
$: details = (...) => {
[...]
return new Promise(...).then(() => {
values.forEach((value, i) => { $(`#${config.id}_${i}`).popover(); });
[...]
});
}();
How can one implement a callback or hook triggered after Svelte inserts the <td> elements from the :then block? Alternatively, is there a method to compel Svelte to retain references to the <td> HTML elements?