Search code examples
web-componentfast-ui

FAST Element's Repeat Directive - Indexing


Hello FAST team/community members!

I am currently building out a project using FAST Element, web components, and Fluent-UI. I am trying to render something based on where two items are in an array.

I noticed that under the repeat directive there is an index property which will give the index of the current item inside a repeat block.

Is it possible to use the index property of repeat to also look ahead in the array?

Ex. if the current item is null, would it be possible to check index + 1 to see if the next item is null as well? Or would this have to be done outside of the repeat block with a check?

Thank you!


Solution

  • Yes, you can do that. However, bear in mind that the index lookup will not be "observed" because the observation system can't see when you access an array directly by index. e.g. myArray[index]. It will return the value just fine, but if what is at that index changes, the rendering engine won't know that and won't be able to trigger an update to the UI. However, if the index itself changes or any other observable changes, updates will work. Array index gets/sets are the one edge case that cannot be detected at present.