Merge pull request #146 from NativeScript/nnikolov/ListViewSetupItemView

Added setupItemView event for Angular ListView.

Author: Nedyalko Nikolov

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

@@ -9,7 +9,10 @@ import {
     HostListener, 
     IterableDiffers, 
     IterableDiffer,
-    ChangeDetectorRef} from 'angular2/core';
+    ChangeDetectorRef,
+    EventEmitter,
+    Output} from 'angular2/core';
+import {isListLikeIterable} from 'angular2/src/facade/collection';
 import {Observable as RxObservable} from 'rxjs'
 import {ListView} from 'ui/list-view';
 import {View} from 'ui/core/view';
@@ -18,6 +21,12 @@ import {ObservableArray} from 'data/observable-array';
 import {LayoutBase} from 'ui/layouts/layout-base';
 const NG_VIEW = "_ngViewRef";
 
+interface SetupItemViewArgs {
+    view: EmbeddedViewRef;
+    data: any;
+    index: number;
+}
+
 @Component({
     selector: 'ListView',
     template: ``,
@@ -28,6 +37,8 @@ export class ListViewComponent {
     private _items: any;
     private _differ: IterableDiffer;
 
+    @Output() public setupItemView: EventEmitter<SetupItemViewArgs> = new EventEmitter<SetupItemViewArgs>();
+    
     @ContentChild(TemplateRef) itemTemplate: TemplateRef;
 
     set items(value: any) {
@@ -36,7 +47,7 @@ export class ListViewComponent {
         if (value instanceof ObservableArray) {
             needDiffer = false;
         }
-        if (needDiffer && !this._differ && value) {
+        if (needDiffer && !this._differ && isListLikeIterable(value)) {
             this._differ = this._iterableDiffers.find(this._items).create(this._cdr, (index, item) => { return item;});
         }
         this.listView.items = this._items;
@@ -45,8 +56,8 @@ export class ListViewComponent {
     private timerId: number;
     private doCheckDelay = 5;
 
-    constructor(private _elementRef: ElementRef, 
-                private _iterableDiffers: IterableDiffers, 
+    constructor(private _elementRef: ElementRef,
+                private _iterableDiffers: IterableDiffers,
                 private _cdr: ChangeDetectorRef,
                 private _appViewManager: AppViewManager) {
         this.listView = _elementRef.nativeElement;
@@ -82,6 +93,7 @@ export class ListViewComponent {
         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});
     }
 
     ngDoCheck() {

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

@@ -0,0 +1,70 @@
+import {assert} from "./test-config";
+import {
+    ElementRef,
+    Component
+} from 'angular2/core';
+import {TestApp} from "./test-app";
+
+class DataItem {
+    constructor(public id: number, public name: string) { }
+}
+
+@Component({
+    selector: 'list-view-setupItemView',
+    template: `
+    <StackLayout>
+        <ListView height="200" [items]="myItems" (setupItemView)="onSetupItemView($event)">
+            <template #item="item" #i="index" #odd="odd" #even="even">
+                <StackLayout [class.odd]="odd" [class.even]="even">
+                    <Label [text]='"index: " + i'></Label>
+                    <Label [text]='"[" + item.id +"] " + item.name'></Label>
+                </StackLayout>
+            </template>
+        </ListView>
+    </StackLayout>
+    `
+})
+export class TestListViewComponent {
+    public myItems: Array<DataItem>;
+    public counter: number;
+
+    constructor(public elementRef: ElementRef) {
+        this.counter = 0;
+        this.myItems = [];
+        for (var i = 0; i < 2; i++) {
+            this.myItems.push(new DataItem(i, "data item " + i));
+        }
+    }
+    
+    onSetupItemView(args) {
+        this.counter++;
+    }
+}
+
+describe('ListView-tests', () => {
+    let testApp: TestApp = null;
+
+    before(() => {
+        return TestApp.create().then((app) => {
+            testApp = app;
+        })
+    });
+
+    after(() => {
+        testApp.dispose();
+    });
+
+    afterEach(() => {
+        testApp.disposeComponents();
+    });
+    
+    it('setupItemView is called for every item', (done) => {
+        return testApp.loadComponent(TestListViewComponent).then((componentRef) => {
+            const component = componentRef.instance;
+            setTimeout(() => {
+                assert.equal(component.counter, 2);
+                done();
+            }, 1000);
+        });
+    });
+});