diff --git a/README.md b/README.md index f12c758..c0ae285 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,16 @@ You can optimize initial display and scrolling when the height of items is known ``` +## `itemKey` + +Allow the internal loop to use a specific key in your data, to help invalidate list items properly if the data changes. + +```html + +

{item.number}: {item.name}

+
+``` + ## Configuring webpack diff --git a/VirtualList.svelte b/VirtualList.svelte index c92f65a..6c6c232 100644 --- a/VirtualList.svelte +++ b/VirtualList.svelte @@ -5,6 +5,7 @@ export let items; export let height = '100%'; export let itemHeight = undefined; + export let itemKey = undefined; let foo; @@ -132,6 +133,15 @@ rows = contents.getElementsByTagName('svelte-virtual-list-row'); mounted = true; }); + + // Use a key from the item data if specified + function getKey(row) { + if (itemKey && row.data.hasOwnProperty(itemKey)) { + return row.data[itemKey]; + } + + return row.index; + }