List View template selector

Author: vakrilov

nativescript-angular/directives.ts

@@ -1,10 +1,11 @@
-import {ListViewComponent, SetupItemViewArgs} from './directives/list-view-comp';
-import {TabViewDirective, TabViewItemDirective} from './directives/tab-view';
-import {ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective} from './directives/action-bar';
-import {AndroidFilterComponent, IosFilterComponent} from './directives/platform-filters';
+import { ListViewComponent, TemplateKeyDirective } from './directives/list-view-comp';
+import { TabViewDirective, TabViewItemDirective } from './directives/tab-view';
+import { ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective } from './directives/action-bar';
+import { AndroidFilterComponent, IosFilterComponent } from './directives/platform-filters';
 
 export const NS_DIRECTIVES = [
     ListViewComponent,
+    TemplateKeyDirective,
     TabViewDirective,
     TabViewItemDirective,
     ActionBarComponent,
@@ -15,13 +16,13 @@ export const NS_DIRECTIVES = [
     IosFilterComponent,
 ];
 
-export {ListViewComponent, SetupItemViewArgs} from './directives/list-view-comp';
-export {TextValueAccessor} from './value-accessors/text-value-accessor';
-export {CheckedValueAccessor} from './value-accessors/checked-value-accessor';
-export {DateValueAccessor} from './value-accessors/date-value-accessor';
-export {TimeValueAccessor} from './value-accessors/time-value-accessor';
-export {NumberValueAccessor} from './value-accessors/number-value-accessor';
-export {SelectedIndexValueAccessor} from './value-accessors/selectedIndex-value-accessor';
-export {TabViewDirective, TabViewItemDirective} from './directives/tab-view';
-export {ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective} from './directives/action-bar';
-export {AndroidFilterComponent, IosFilterComponent} from './directives/platform-filters';
+export { ListViewComponent, SetupItemViewArgs, TemplateKeyDirective } from './directives/list-view-comp';
+export { TextValueAccessor } from './value-accessors/text-value-accessor';
+export { CheckedValueAccessor } from './value-accessors/checked-value-accessor';
+export { DateValueAccessor } from './value-accessors/date-value-accessor';
+export { TimeValueAccessor } from './value-accessors/time-value-accessor';
+export { NumberValueAccessor } from './value-accessors/number-value-accessor';
+export { SelectedIndexValueAccessor } from './value-accessors/selectedIndex-value-accessor';
+export { TabViewDirective, TabViewItemDirective } from './directives/tab-view';
+export { ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective } from './directives/action-bar';
+export { AndroidFilterComponent, IosFilterComponent } from './directives/platform-filters';

nativescript-angular/directives/list-view-comp.ts

@@ -1,7 +1,10 @@
 import {
     Component,
+    Directive,
+    Input,
     DoCheck,
     OnDestroy,
+    AfterContentInit,
     ElementRef,
     ViewContainerRef,
     TemplateRef,
@@ -13,14 +16,16 @@ import {
     EventEmitter,
     ViewChild,
     Output,
-    ChangeDetectionStrategy } from '@angular/core';
-import {isBlank} from "../lang-facade";
-import {isListLikeIterable} from "../collection-facade";
-import {ListView} from 'ui/list-view';
-import {View} from 'ui/core/view';
-import {ObservableArray} from 'data/observable-array';
-import {LayoutBase} from 'ui/layouts/layout-base';
-import {listViewLog} from "../trace";
+    Host,
+    ChangeDetectionStrategy
+} from '@angular/core';
+import { isBlank } from "../lang-facade";
+import { isListLikeIterable } from "../collection-facade";
+import { ListView } from 'ui/list-view';
+import { View, KeyedTemplate } from 'ui/core/view';
+import { ObservableArray } from 'data/observable-array';
+import { LayoutBase } from 'ui/layouts/layout-base';
+import { listViewLog } from "../trace";
 
 const NG_VIEW = "_ngViewRef";
 
@@ -51,14 +56,15 @@ export interface SetupItemViewArgs {
     inputs: ['items'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListViewComponent implements DoCheck, OnDestroy {
+export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit {
     public get nativeElement(): ListView {
         return this.listView;
     }
 
     private listView: ListView;
     private _items: any;
     private _differ: IterableDiffer;
+    private _templateMap: Map<string, KeyedTemplate>;
 
     @ViewChild('loader', { read: ViewContainerRef }) loader: ViewContainerRef;
 
@@ -68,7 +74,7 @@ export class ListViewComponent implements DoCheck, OnDestroy {
 
     set items(value: any) {
         this._items = value;
-        var needDiffer = true;
+        let needDiffer = true;
         if (value instanceof ObservableArray) {
             needDiffer = false;
         }
@@ -87,12 +93,51 @@ export class ListViewComponent implements DoCheck, OnDestroy {
         this.listView.on("itemLoading", this.onItemLoading, this);
     }
 
+    ngAfterContentInit() {
+        listViewLog("ListView.ngAfterContentInit()");
+        this.setItemTemplates();
+    }
+
     ngOnDestroy() {
         this.listView.off("itemLoading", this.onItemLoading, this);
     }
 
+    private setItemTemplates() {
+        if (this._templateMap) {
+            listViewLog("Setting templates");
+
+            const templates: KeyedTemplate[] = [];
+            this._templateMap.forEach(value => {
+                templates.push(value);
+            });
+            this.listView.itemTemplates = templates;
+        }
+    }
+
+    public registerTemplate(key: string, template: TemplateRef<ListItemContext>) {
+        listViewLog("registerTemplate for key: " + key);
+        if (!this._templateMap) {
+            this._templateMap = new Map<string, KeyedTemplate>();
+        }
+
+        const keyedTemplate = {
+            key,
+            createView: () => {
+                listViewLog("registerTemplate for key: " + key);
+
+                const viewRef = this.loader.createEmbeddedView(template, new ListItemContext(), 0);
+                const resultView = getSingleViewFromViewRef(viewRef);
+                resultView[NG_VIEW] = viewRef;
+
+                return resultView;
+            }
+        };
+
+        this._templateMap.set(key, keyedTemplate);
+    }
+
     public onItemLoading(args) {
-        if (!this.itemTemplate) {
+        if (!args.view && !this.itemTemplate) {
             return;
         }
 
@@ -115,6 +160,7 @@ export class ListViewComponent implements DoCheck, OnDestroy {
             args.view = getSingleViewFromViewRef(viewRef);
             args.view[NG_VIEW] = viewRef;
         }
+
         this.setupViewRef(viewRef, currentItem, index);
 
         this.detectChangesOnChild(viewRef, index);
@@ -128,7 +174,7 @@ export class ListViewComponent implements DoCheck, OnDestroy {
         context.$implicit = data;
         context.item = data;
         context.index = index;
-        context.even = (index % 2 == 0);
+        context.even = (index % 2 === 0);
         context.odd = !context.even;
 
         this.setupItemView.next({ view: viewRef, data: data, index: index, context: context });
@@ -139,24 +185,23 @@ export class ListViewComponent implements DoCheck, OnDestroy {
         // TODO: Is there a better way of getting viewRef's change detector
         const childChangeDetector = <ChangeDetectorRef>(<any>viewRef);
 
-        listViewLog("Manually detect changes in child: " + index)
+        listViewLog("Manually detect changes in child: " + index);
         childChangeDetector.markForCheck();
         childChangeDetector.detectChanges();
     }
 
     ngDoCheck() {
         if (this._differ) {
-            listViewLog("ngDoCheck() - execute differ")
+            listViewLog("ngDoCheck() - execute differ");
             const changes = this._differ.diff(this._items);
             if (changes) {
-                listViewLog("ngDoCheck() - refresh")
+                listViewLog("ngDoCheck() - refresh");
                 this.listView.refresh();
             }
         }
     }
 }
 
-
 function getSingleViewRecursive(nodes: Array<any>, nestLevel: number) {
     const actualNodes = nodes.filter((n) => !!n && n.nodeName !== "#text");
 
@@ -175,7 +220,7 @@ function getSingleViewRecursive(nodes: Array<any>, nestLevel: number) {
             return actualNodes[0];
         }
         else {
-            return getSingleViewRecursive(actualNodes[0].children, nestLevel + 1)
+            return getSingleViewRecursive(actualNodes[0].children, nestLevel + 1);
         }
     }
 }
@@ -184,8 +229,24 @@ function getSingleViewFromViewRef(viewRef: EmbeddedViewRef<any>): View {
     return getSingleViewRecursive(viewRef.rootNodes, 0);
 }
 
-const changeDetectorMode = ["CheckOnce", "Checked", "CheckAlways", "Detached", "OnPush", "Default"];
-const changeDetectorStates = ["Never", "CheckedBefore", "Error"];
-function getChangeDetectorState(cdr: any) {
-    return "Mode: " + changeDetectorMode[parseInt(cdr.cdMode)] + " State: " + changeDetectorStates[parseInt(cdr.cdState)];
+@Directive({ selector: "[nsTemplateKey]" })
+export class TemplateKeyDirective {
+    constructor(
+        private templateRef: TemplateRef<any>,
+        @Host() private list: ListViewComponent) {
+    }
+
+    @Input()
+    set nsTemplateKey(value: any) {
+        if (this.list && this.templateRef) {
+            this.list.registerTemplate(value, this.templateRef);
+        }
+    }
 }
+
+// Debug helpers:
+// const changeDetectorMode = ["CheckOnce", "Checked", "CheckAlways", "Detached", "OnPush", "Default"];
+// const changeDetectorStates = ["Never", "CheckedBefore", "Error"];
+// function getChangeDetectorState(cdr: any) {
+//     return "Mode: " + changeDetectorMode[parseInt(cdr.cdMode)] + " State: " + changeDetectorStates[parseInt(cdr.cdState)];
+// }

nativescript-angular/package.json

@@ -37,7 +37,7 @@
     "url": "0.10.3"
   },
   "devDependencies": {
-    "tns-core-modules": ">=2.2.0 || >=2.2.0-2016",
+    "tns-core-modules": ">=2.4.0 || >=2.4.0-2016",
     "zone.js": "^0.6.21",
     "typescript": "^2.0.2",
     "@angular/compiler-cli": "~2.1.1"

nativescript-angular/router/page-router-outlet.ts

@@ -60,7 +60,7 @@ class RefCache {
 export class PageRouterOutlet {
     private viewUtil: ViewUtil;
     private refCache: RefCache = new RefCache();
-    private isInitalPage: boolean = true;
+    private isInitialPage: boolean = true;
     private detachedLoaderFactory: ComponentFactory<DetachedLoader>;
 
     private currentActivatedComp: ComponentRef<any>;
@@ -108,18 +108,18 @@ export class PageRouterOutlet {
     deactivate(): void {
         if (this.locationStrategy._isPageNavigatingBack()) {
             log("PageRouterOutlet.deactivate() while going back - should destroy");
-            const popedItem = this.refCache.pop();
-            const popedRef = popedItem.componentRef;
+            const poppedItem = this.refCache.pop();
+            const poppedRef = poppedItem.componentRef;
 
-            if (this.currentActivatedComp !== popedRef) {
+            if (this.currentActivatedComp !== poppedRef) {
                 throw new Error("Current componentRef is different for cached componentRef");
             }
 
-            this.destroyCacheItem(popedItem);
+            this.destroyCacheItem(poppedItem);
             this.currentActivatedComp = null;
 
         } else {
-            log("PageRouterOutlet.deactivate() while going foward - do nothing");
+            log("PageRouterOutlet.deactivate() while going forward - do nothing");
         }
     }
 
@@ -128,13 +128,13 @@ export class PageRouterOutlet {
             this.destroyCacheItem(this.refCache.pop());
         }
     }
-    private destroyCacheItem(popedItem: CacheItem) {
-        if (isPresent(popedItem.componentRef)) {
-            popedItem.componentRef.destroy();
+    private destroyCacheItem(poppedItem: CacheItem) {
+        if (isPresent(poppedItem.componentRef)) {
+            poppedItem.componentRef.destroy();
         }
 
-        if (isPresent(popedItem.loaderRef)) {
-            popedItem.loaderRef.destroy();
+        if (isPresent(poppedItem.loaderRef)) {
+            poppedItem.loaderRef.destroy();
         }
     }
 
@@ -165,9 +165,9 @@ export class PageRouterOutlet {
         const pageRoute = new PageRoute(activatedRoute);
         providers = [...providers, ...ReflectiveInjector.resolve([{ provide: PageRoute, useValue: pageRoute }])];
 
-        if (this.isInitalPage) {
-            log("PageRouterOutlet.activate() inital page - just load component");
-            this.isInitalPage = false;
+        if (this.isInitialPage) {
+            log("PageRouterOutlet.activate() initial page - just load component");
+            this.isInitialPage = false;
             const inj = ReflectiveInjector.fromResolvedProviders(providers, this.containerRef.parentInjector);
             this.currentActivatedComp = this.containerRef.createComponent(factory, this.containerRef.length, inj, []);
             this.refCache.push(this.currentActivatedComp, pageRoute, outletMap, null);
@@ -192,7 +192,7 @@ export class PageRouterOutlet {
         activatedRoute: ActivatedRoute,
         providers: ResolvedReflectiveProvider[],
         outletMap: RouterOutletMap): void {
-        log("PageRouterOutlet.activate() - Back naviation, so load from cache");
+        log("PageRouterOutlet.activate() - Back navigation, so load from cache");
 
         this.locationStrategy._finishBackPageNavigation();
 
@@ -202,7 +202,7 @@ export class PageRouterOutlet {
         this.outletMap = cacheItem.outletMap;
 
         // HACK: Fill the outlet map provided by the router, with the outlets that we have cached.
-        // This is needed beacuse the component is taken form the cache and not created - so it will not register
+        // This is needed because the component is taken form the cache and not created - so it will not register
         // its child router-outlets to the newly created outlet map.
         (<any>Object).assign(outletMap, cacheItem.outletMap);
 

ng-sample/app/app.ts

@@ -20,13 +20,14 @@ import { Color } from "color";
 import trace = require("trace");
 // trace.setCategories(rendererTraceCategory);
 // trace.setCategories(routerTraceCategory);
-// trace.setCategories(listViewTraceCategory);
+trace.setCategories(listViewTraceCategory);
 trace.enable();
 
 import { RendererTest } from './examples/renderer-test';
 import { TabViewTest } from './examples/tab-view/tab-view-test';
 import { Benchmark } from './performance/benchmark';
 import { ListTest } from './examples/list/list-test';
+import { ListTemplateSelectorTest } from './examples/list/template-selector';
 import { ListTestAsync, ListTestFilterAsync } from "./examples/list/list-test-async";
 import { ImageTest } from "./examples/image/image-test";
 import { HttpTest } from "./examples/http/http-test";
@@ -74,7 +75,7 @@ function makeExampleModule(componentType) {
     }
     let exports: any[] = [];
     if (componentType.exports) {
-        exports = componentType.exports
+        exports = componentType.exports;
     }
     let entries = [];
     if (componentType.entries) {
@@ -83,7 +84,7 @@ function makeExampleModule(componentType) {
     entries.push(componentType);
     let providers = [];
     if (componentType.providers) {
-        providers = componentType.providers
+        providers = componentType.providers;
     }
     @NgModule({
         bootstrap: [componentType],
@@ -111,10 +112,11 @@ const customPageFactoryProvider = {
 };
 
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
-platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest));
+// platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(TabViewTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(Benchmark));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTest));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTemplateSelectorTest));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTestAsync));
 //platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ImageTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));

ng-sample/app/examples/list/styles.css

@@ -13,4 +13,16 @@ button {
 .list-title {
     font-size: 20;
     text-align: center;
+}
+
+.header {
+    background-color: cornflowerblue;
+    font-size: 28;
+    color: black;
+    text-align: center;
+}
+
+.item {
+    background-color: lightgreen;
+    color: darkslategrey;
 }