Merge pull request halfnelson#88 from changeweb/master

Add Multiple Templates Selector Function

Author: halfnelson

docs_src/content/docs/40-components.md

@@ -330,6 +330,34 @@ function onItemTap(event) {
 }
 ```
 
+**Multiple Templates Selector Function**
+
+Multiple templates can be used for different layouts of list items, which is similar to [NativeScript Multiple Templates Selector Function](https://docs.nativescript.org/ui/components/list-view#multiple-templates-selector-function). `itemTemplateSelector` is used to select template using `key` which is returned based on your logic.
+
+> **Note:** Use _multiple templates_ approach instead of `{#if}` block, because the _view recycling_ concept does not work as intended since `<listView>` cannot reuse the same template view if off-screen items require different type of template.
+
+```html
+<listView bind:this="{test_subject}" items={items} itemTemplateSelector={selectTemplate}>
+  <Template let:item key="odd">
+      <label text="Odd {item}" />
+  </Template>
+  <Template let:item key="even">
+      <label text="Even {item}" />
+  </Template>
+</listView>
+```
+```js
+<script>
+import { Template } from 'svelte-native/components'
+export let test_subject;
+let items = ["item 0", "item 1"]
+function selectTemplate(item, index, items) {
+   // Your logic here
+   return  (index % 2 == 0) ? "even" : "odd";
+}
+</script>
+```
+
 > **IMPORTANT NOTE**: unlike Svelte expressions, The `<listView>` will **not** update the item list if you assign the same value to lists (eg `listOfItems.push('four'); listOfItems = listOfItems`). It **will** update if you assign a _new list reference_ (eg `listOfItems = listOfItems.concat('four')` or `listOfItems = [...listOfItems, 'four']`).
 
 #### Props