Element.ref only associated to last element of repeat.for cycle [SOLVED]

Hello Everyone!

I am doing a repeat.for cycle to render a dynamic amount of elements. I want to have control of them individually, associating the DOM element on each channel.el property.

But unfortunately the cycle is only associating the last element to the channel.el property. What can I be doing wrong?

<div class="video-player flex-1" repeat.for="channel of selectedChannels">
  <div class="video-overlay-container"><span>${channel.name}</span></div>
  <video muted.bind="mute" element.ref="channel.el" loadeddata.trigger="onLoadeddata(channel)" play.trigger="onPlay()" pause.trigger="onPause()" timeupdate.trigger="onTimeUpdate(channel)" >
   <source if.bind="channel.media.path" src.bind="channel.media.path"/>
  </video>
</div>

After some research, i found out that if my first render have more than one selectedChannel enable, i can have control to all the video DOM elements. But if i had them dynamically after the rendering, i loose control of the element.

1 Like

Quick test looks like everything works as you expect it to. Share the repo?

2 Likes

Thank you for your support. You were right. Problem was solved. Nothing realted with the framework but with the logic of my script

2 Likes