Merge pull request #2926 from NativeScript/its-snippets

Add ListView item template selector code snippets

tests/app/ui/list-view/list-view-tests.ts

@@ -800,6 +800,21 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item");
     }
 
+   
+    public test_ItemTemplateSelector_IsCorrectlyUsedAsAFunction() {
+        let listView = this.testView;
+        listView.itemTemplateSelector = selectItemTemplate;
+        let items = ListViewTest.generateItemsForMultipleTemplatesTests(2);
+        let itemTemplateSelectorFunction = <any>listView.itemTemplateSelector;
+        TKUnit.wait(0.1);
+
+        let templateKey0 = itemTemplateSelectorFunction(items[0], 0, items);
+        TKUnit.assertEqual(templateKey0, "red", "itemTemplateSelector result for first item");
+
+        let templateKey1 = itemTemplateSelectorFunction(items[1], 1, items);
+        TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item");
+    }
+
     public test_ItemTemplateSelector_ItemTemplatesAreCorrectlyParsedFromString() {
         let listView = this.testView;
         listView.itemTemplates = this._itemTemplatesString;
@@ -915,3 +930,9 @@ interface Item {
 export function createTestCase(): ListViewTest {
     return new ListViewTest();
 }
+
+// >> article-item-template-selector-function
+export function selectItemTemplate(item: Item, index: number, items: Array<Item>) {
+    return item.age % 2 === 0 ? "red" : "green";
+}
+// << article-item-template-selector-function

tests/app/ui/list-view/list-view.md

@@ -40,6 +40,55 @@ Other modules which will be used in the code samples in this article:
  </ListView>{%endraw%}
 </Page>
 ```
+### Define multiple item templates and an item template selector in XML.
+The itemTemplateSelector can be an expression specified directly in XML. The context of the expression is the data item for each row.
+``` XML
+<Page>
+ {%raw%}<ListView items="{{ myItems }}" itemTemplateSelector="age > 18 ? 'green' : 'red'">
+    <ListView.itemTemplates>
+      <template key="green">
+        <Label text="{{ age }}" style.backgroundColor="green" />
+      </template>
+      <template key="red">
+        <Label text="{{ age }}" style.backgroundColor="red" />
+      </template>
+    </ListView.itemTemplates>
+ </ListView>{%endraw%}
+</Page>
+```
+### Specifying the item template selector as a function in the code-behind file
+In case your item template selector involves complicated logic which cannot be expressed with an expression, you can create an item template selector function in the code behind of the page in which the ListView resides. The function receives the respective data item, the row index and the entire ListView items collection as parameters. It has to return the the key of the template to be used based on the supplied information.
+``` XML
+<Page>
+ {%raw%}<ListView items="{{ myItems }}" itemTemplateSelector="selectItemTemplate">
+    <ListView.itemTemplates>
+      <template key="green">
+        <Label text="{{ age }}" style.backgroundColor="green" />
+      </template>
+      <template key="red">
+        <Label text="{{ age }}" style.backgroundColor="red" />
+      </template>
+    </ListView.itemTemplates>
+ </ListView>{%endraw%}
+</Page>
+```
+{%snippet article-item-template-selector-function%}
+### Alternating row colors
+You can use the special value '$index' in the item template selector expression which represents the row index.
+``` XML
+<Page>
+ {%raw%}<ListView items="{{ myItems }}" itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'">
+    <ListView.itemTemplates>
+      <template key="even">
+        <Label text="{{ age }}" style.backgroundColor="white" />
+      </template>
+      <template key="odd">
+        <Label text="{{ age }}" style.backgroundColor="gray" />
+      </template>
+    </ListView.itemTemplates>
+ </ListView>{%endraw%}
+</Page>
+```
 ### Creating a ListView
 {%snippet article-create-listview%}
 ### Using ListView with Array