Manually trigger change detection onItemLoading for current item only

Author: vakrilov

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

@@ -1,6 +1,7 @@
 import {
     Component,
     DoCheck,
+    OnDestroy,
     ElementRef,
     ViewContainerRef,
     TemplateRef,
@@ -14,7 +15,7 @@ import {
     ViewChild,
     Output,
     NgZone,
-    ChangeDetectionStrategy} from '@angular/core';
+    ChangeDetectionStrategy } from '@angular/core';
 import {isBlank} from '@angular/core/src/facade/lang';
 import {isListLikeIterable} from '@angular/core/src/facade/collection';
 import {Observable as RxObservable} from 'rxjs'
@@ -23,7 +24,12 @@ import {View} from 'ui/core/view';
 import {NgView} from '../view-util';
 import {ObservableArray} from 'data/observable-array';
 import {LayoutBase} from 'ui/layouts/layout-base';
+<<<<<<< 2b36449d70d559d1fda6cdf4d271246b5fe0ecd2
 import {rendererLog, rendererError} from "../trace";
+=======
+import 'rxjs/add/operator/debounceTime';
+
+>>>>>>> Manually trigger change detection onItemLoading for current item only
 const NG_VIEW = "_ngViewRef";
 
 export class ListItemContext {
@@ -52,7 +58,7 @@ export interface SetupItemViewArgs {
     inputs: ['items'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListViewComponent {
+export class ListViewComponent implements DoCheck, OnDestroy {
     public get nativeElement(): ListView {
         return this.listView;
     }
@@ -76,20 +82,24 @@ export class ListViewComponent {
         if (needDiffer && !this._differ && isListLikeIterable(value)) {
             this._differ = this._iterableDiffers.find(this._items).create(this._cdr, (index, item) => { return item; });
         }
+
+        // this._cdr.detach();
         this.listView.items = this._items;
     }
 
-    private timerId: number;
-    private doCheckDelay = 5;
-
     constructor(private _elementRef: ElementRef,
         private _iterableDiffers: IterableDiffers,
         private _cdr: ChangeDetectorRef,
         private _zone: NgZone) {
         this.listView = _elementRef.nativeElement;
+
+        this.listView.on("itemLoading", this.onItemLoading, this);
+    }
+
+    ngOnDestroy() {
+        this.listView.off("itemLoading", this.onItemLoading, this);
     }
 
-    @HostListener("itemLoading", ['$event'])
     public onItemLoading(args) {
         if (!this.itemTemplate) {
             return;
@@ -101,20 +111,23 @@ export class ListViewComponent {
         let viewRef: EmbeddedViewRef<ListItemContext>;
 
         if (args.view) {
-            rendererLog("ListView.onItemLoading: " + index + " - Reusing existing view");
+            log("ListView.onItemLoading: " + index + " - Reusing existing view");
+
             viewRef = args.view[NG_VIEW];
             // getting angular view from original element (in cases when ProxyViewContainer is used NativeScript internally wraps it in a StackLayout)
             if (!viewRef) {
                 viewRef = (args.view._subViews && args.view._subViews.length > 0) ? args.view._subViews[0][NG_VIEW] : undefined;
             }
         }
         else {
-            rendererLog("ListView.onItemLoading: " + index + " - Creating view from template");
+            log("ListView.onItemLoading: " + index + " - Creating view from template");
             viewRef = this.loader.createEmbeddedView(this.itemTemplate, new ListItemContext(), 0);
             args.view = getSingleViewFromViewRef(viewRef);
             args.view[NG_VIEW] = viewRef;
         }
         this.setupViewRef(viewRef, currentItem, index);
+
+        this.detectChangesOnChild(viewRef);
     }
 
     public setupViewRef(viewRef: EmbeddedViewRef<ListItemContext>, data: any, index: number): void {
@@ -131,25 +144,42 @@ export class ListViewComponent {
         this.setupItemView.next({ view: viewRef, data: data, index: index, context: context });
     }
 
+    private detectChangesOnChild(viewRef: EmbeddedViewRef<ListItemContext>){
+        // Manually detect changes in view ref
+        var childCD = <ChangeDetectorRef>(<any>viewRef);
+        var childView = (<any>viewRef)._view;
+
+        log("------------ detectChanges START ----------")
+        log("CangeDetectionState child before mark " + this.logCD(childView));
+        childCD.markForCheck();
+        childCD.detectChanges();
+        log("CangeDetectionState child after detect " + this.logCD(childView));
+        log("------------ detectChanges END ----------")
+    }
+
+    private logCD(cdr: any) {
+        var modes = ["CheckOnce", "Checked", "CheckAlways", "Detached", "OnPush", "Default"];
+        var states = ["Never", "CheckedBefore", "Error"];
+        return "Mode: " + modes[parseInt(cdr.cdMode)] + " State: " + states[parseInt(cdr.cdState)];
+    }
+
     ngDoCheck() {
-        if (this.timerId) {
-            clearTimeout(this.timerId);
+        if (this._differ) {
+            log("======> ngDoCheck() DIFFER")
+            var changes = this._differ.diff(this._items);
+            if (changes) {
+                log("======> ngDoCheck() REFRESH")
+                // this._cdr.detach();
+                this.listView.refresh();
+            }
         }
-
-        this._zone.runOutsideAngular(() => {
-            this.timerId = setTimeout(() => {
-                clearTimeout(this.timerId);
-                if (this._differ) {
-                    var changes = this._differ.diff(this._items);
-                    if (changes) {
-                        this.listView.refresh();
-                    }
-                }
-            }, this.doCheckDelay);
-        });
     }
 }
 
+function log(msg){
+    // console.log(msg);
+}
+
 function getSingleViewFromViewRef(viewRef: EmbeddedViewRef<any>): View {
     var getSingleViewRecursive = (nodes: Array<any>, nestLevel: number) => {
         var actualNodes = nodes.filter((n) => !!n && n.nodeName !== "#text");