Example with each loop

[mattpilott]

Would be handy to see how this works in an each loop in the examples

[infinito84]

@mattpilott I did something like this

<script>
  import { onMount } from "svelte"
  import IntersectionObserver from 'svelte-intersection-observer'

  let notifications = []
  let notificationsDom = []

  onMount(() => {
    setInterval(loadNotifications, 30000);
    loadNotifications()  
  })

  async function loadNotifications() {
    const response = await fetch('/api/notifications')
    notifications = (await response.json())
    notificationsDom = new Array(notifications.length)
  }

  async function markReadNotificationId(id) {
    console.log(id)
  }
</script>
<div class="list-group list-group-flush list-group-activity my-n3">
  {#each notifications as notification, i}
    <IntersectionObserver element={notificationsDom[i]} on:intersect={() => {
      markReadNotificationId(notification.id)
    }}>
      <a class="list-group-item text-reset" bind:this={notificationsDom[i]} href="{notification.link}">
        ...
      </a>
    </IntersectionObserver>
  {/each}
</div>

[the-leonat]

Doesn't this create an IntersectionObserver for every element? IntersectionObservers are designed to be created once for the root element.

[harryqt]

@metonym hi, I could not make it work with each loop, can you give use example?