Upgrade to RC1: new ListView templates.

Author: hdeshev

ng-sample/app/examples/list/list-test-async.ts

@@ -11,7 +11,7 @@ export class DataItem {
     template: `
     <GridLayout>
         <ListView [items]="myItems | async" (itemTap)="onItemTap($event)">
-            <template #item="item" #i="index" #odd="odd" #even="even">
+            <template let-item="item" let-i="index" let-odd="odd" let-even="even">
                 <StackLayout [class.odd]="odd" [class.even]="even">
                     <Label class="test" [text]='"index: " + item.name'></Label>
                 </StackLayout>

ng-sample/app/examples/list/list-test.ts

@@ -30,7 +30,7 @@ class DataItem {
             <Label row="0" text="-==START==-" fontSize="20"></Label>
             <GridLayout row="1">
                 <ListView [items]="myItems" (itemTap)="onItemTap($event)">
-                    <template #item="item" #i="index" #odd="odd" #even="even">
+                    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
                         <StackLayout [class.odd]="odd" [class.even]="even">
                             <Label [text]='"index: " + i'></Label>
                             <Label [text]='"[" + item.id +"] " + item.name'></Label>

ng-sample/app/examples/renderer-test.html

@@ -24,8 +24,8 @@
     <TextView *ngIf='showDetails' [text]='detailsText'></TextView>
     <Label text='==============================' fontSize='20'></Label>
     <StackLayout #more *ngIf='showDetails' orientation='vertical'>
-        <TextField *ngFor='#detailLine of detailLines' [text]='detailLine'></TextField>
+        <TextField *ngFor='let detailLine of detailLines' [text]='detailLine'></TextField>
     </StackLayout>
     <Label text='==============================' fontSize='20'></Label>
     <templated-component [renderChild]="true"></templated-component>
-</StackLayout>
+</StackLayout>

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

@@ -22,8 +22,19 @@ import {ObservableArray} from 'data/observable-array';
 import {LayoutBase} from 'ui/layouts/layout-base';
 const NG_VIEW = "_ngViewRef";
 
+export class ListItemContext {
+    constructor(
+        public $implicit?: any,
+        public item?: any,
+        public index?: number,
+        public even?: boolean,
+        public odd?: boolean
+    ) {
+    }
+}
+
 export interface SetupItemViewArgs {
-    view: EmbeddedViewRef;
+    view: EmbeddedViewRef<any>;
     data: any;
     index: number;
 }
@@ -45,7 +56,7 @@ export class ListViewComponent {
 
     @Output() public setupItemView: EventEmitter<SetupItemViewArgs> = new EventEmitter<SetupItemViewArgs>();
 
-    @ContentChild(TemplateRef) itemTemplate: TemplateRef;
+    @ContentChild(TemplateRef) itemTemplate: TemplateRef<ListItemContext>;
 
     set items(value: any) {
         this._items = value;
@@ -77,28 +88,30 @@ export class ListViewComponent {
         let index = args.index;
         let items = args.object.items;
         let currentItem = typeof (items.getItem) === "function" ? items.getItem(index) : items[index];
-        let viewRef: EmbeddedViewRef;
+        let viewRef: EmbeddedViewRef<ListItemContext>;
 
         if (args.view) {
             console.log("ListView.onItemLoading: " + index + " - Reusing exisiting view");
             viewRef = args.view[NG_VIEW];
         }
         else {
             console.log("ListView.onItemLoading: " + index + " - Creating view from template");
-            viewRef = this.loader.createEmbeddedView(this.itemTemplate, 0);
+            viewRef = this.loader.createEmbeddedView(this.itemTemplate, new ListItemContext(), 0);
             args.view = getSingleViewFromViewRef(viewRef);
             args.view[NG_VIEW] = viewRef;
         }
         this.setupViewRef(viewRef, currentItem, index);
     }
 
-    public setupViewRef(viewRef: EmbeddedViewRef, data: any, index: number): void {
-        viewRef.setLocal('\$implicit', data);
-        viewRef.setLocal("item", data);
-        viewRef.setLocal("index", index);
-        viewRef.setLocal('even', (index % 2 == 0));
-        viewRef.setLocal('odd', (index % 2 == 1));
-        this.setupItemView.next({'view': viewRef, 'data': data, 'index': index});
+    public setupViewRef(viewRef: EmbeddedViewRef<ListItemContext>, data: any, index: number): void {
+        const context = viewRef.context;
+        context.$implicit = data;
+        context.item = data;
+        context.index = index;
+        context.even = (index % 2 == 0);
+        context.odd = !context.even;
+
+        this.setupItemView.next({view: viewRef, data: data, index: index, context: context});
     }
 
     ngDoCheck() {
@@ -118,7 +131,7 @@ export class ListViewComponent {
     }
 }
 
-function getSingleViewFromViewRef(viewRef: EmbeddedViewRef): View {
+function getSingleViewFromViewRef(viewRef: EmbeddedViewRef<any>): View {
     var getSingleViewRecursive = (nodes: Array<any>, nestLevel: number) => {
         var actualNodes = nodes.filter((n) => !!n && n.nodeName !== "#text");