1. <template></template>
is not supported as a root element of a virtual repeat template, because virtualization requires item heights to be calculatable. With <template></template>
, there is no easy and performant way to acquire this value.
2. Similar to (1), other template controllers cannot be used in conjunction with virtual-repeat
, unlike repeat i.e: built-in
template controllers: with
, if
, replaceable
cannot be used with virtual-repeat
. You can easily work around this constraint by nesting other template controllers inside the repeated element, with <template></template>
element.
For example : app.html
<template>
<h1>${message}</h1>
<div virtual-repeat.for="person of persons">
<template with.bind="person">
${Name}
</template>
</div>
</template>
3. Beware of CSS selector : nth-child
and similar selectors. Virtualization requires appropriate removing and inserting visible items, based on scroll position. This means DOM elements order will not stay the same, thus creating unexpected :nth-child CSS selector behavior
. To work around this, you can use contextual properties $index
, $odd
, $even
etc... to determine an item position, and apply CSS classes/styles
against it, like the following example :
<template>
<div virtual-repeat.for="person of persons" class="${$odd ? 'odd' : 'even'}-row">
${person.name}
</div>
</template>​
4. Similar to (3), virtualization requires appropriate removing and inserting visible items, corresponding lifecycle of items view will also be triggered while inserting (bind, attached)
or removing (unbind, detached)