feat(core): Repeater multiple item templates implementation (#8981)

apps/ui/src/main-page.ts

@@ -37,6 +37,7 @@ export function pageLoaded(args: EventData) {
 	examples.set('text-view', 'text-view/main-page');
 	examples.set('webview', 'web-view/main-page');
 	examples.set('progress-bar', 'progress-bar/main-page');
+	examples.set('repeater', 'repeater/main-page');
 	examples.set('date-picker', 'date-picker/date-picker-page');
 	examples.set('nested-frames', 'nested-frames/main-page');
 	examples.set('screen-qualifiers', 'screen-qualifiers/main-page');

apps/ui/src/repeater/main-page.ts

@@ -0,0 +1,17 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { SubMainPageViewModel } from '../sub-main-page-view-model';
+import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
+import { Page } from '@nativescript/core/ui/page';
+
+export function pageLoaded(args: EventData) {
+	const page = <Page>args.object;
+	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
+	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+	const examples = new Map<string, string>();
+	examples.set('multi-templates', 'repeater/multi-templates-page');
+
+	return examples;
+}

apps/ui/src/repeater/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/ui/src/repeater/multi-templates-page.ts

@@ -0,0 +1,13 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { ObservableArray } from '@nativescript/core/data/observable-array';
+import { Page } from '@nativescript/core/ui/page';
+import { MultiTemplatesViewModel } from './multi-templates-view-model';
+
+export function pageLoaded(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new MultiTemplatesViewModel();
+}
+
+export function getOddEvenTemplate(item: number, index: number, items: ObservableArray<number>): string {
+	return index % 2 === 0 ? 'even' : '';
+}

apps/ui/src/repeater/multi-templates-page.xml

@@ -0,0 +1,18 @@
+<Page loaded="pageLoaded">
+    <ScrollView>
+        <Repeater items="{{ items }}" itemTemplateSelector="getOddEvenTemplate">
+            <Repeater.itemTemplate>
+                <StackLayout backgroundColor="blue" height="40">
+                    <Label text="{{ $value }}" class="p-r-10" color="#fff" fontSize="16" />
+                </StackLayout>
+            </Repeater.itemTemplate>
+            <Repeater.itemTemplates>
+                <template key="even">
+                    <StackLayout backgroundColor="green" height="40">
+                        <Label text="{{ $value }}" class="p-r-10" color="#fff" fontSize="16" />
+                    </StackLayout>
+                </template>
+            </Repeater.itemTemplates>
+        </Repeater>
+    </ScrollView>
+</Page>

apps/ui/src/repeater/multi-templates-view-model.ts

@@ -0,0 +1,15 @@
+import { Observable } from '@nativescript/core/data/observable';
+import { ObservableArray } from '@nativescript/core/data/observable-array';
+
+export class MultiTemplatesViewModel extends Observable {
+	private _items: ObservableArray<number>;
+
+	get items(): ObservableArray<number> {
+		this._items = new ObservableArray<number>();
+		for (let i = 0; i < 20; i++) {
+			this._items.push(i);
+		}
+
+		return this._items;
+	}
+}