fix(virtualScroll): detect changes in individual nodes

Closes #6137
ionic-team · Jun 9, 2016 · f049521 · f049521
1 parent b5107cd
commit f049521
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/src/components/virtual-scroll/test/basic/index.ts b/src/components/virtual-scroll/test/basic/index.ts
@@ -6,13 +6,18 @@ import {ionicBootstrap} from '../../../../../src';
   templateUrl: 'main.html'
 })
 class E2EPage {
-  items = [];
+  items: any[] = [];
 
   @ViewChild('content') content: ElementRef;
 
   constructor() {
     for (var i = 0; i < 200; i++) {
-      this.items.push(i);
+      this.items.push({
+        value: i,
+        someMethod: function() {
+          return `!!`
+        }
+      });
     }
   }
 

diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html
@@ -18,7 +18,7 @@
     </ion-item-divider>
 
     <ion-item *virtualItem="let item">
-      Item: {{item}}
+      Item: {{item.value}} {{item.someMethod()}}
     </ion-item>
 
   </ion-list>

diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts
@@ -436,7 +436,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
                       this._ftrTmp && this._ftrTmp.templateRef, true);
 
     // ******** DOM WRITE ****************
-    this._cd.detectChanges();
+    this.detectChanges();
 
     // wait a frame before trying to read and calculate the dimensions
     nativeRaf(this.postRenderVirtual.bind(this));
@@ -470,6 +470,20 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     );
   }
 
+  /**
+   * @private
+   */
+  detectChanges() {
+    let node: VirtualNode;
+    for (var i = 0; i < this._nodes.length; i++) {
+      node = this._nodes[i];
+      if (node.hasChanges) {
+        node.view['detectChanges']();
+        node.hasChanges = false;
+      }
+    }
+  }
+
   /**
    * @private
    */
@@ -481,14 +495,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
 
     if (this._queue === QUEUE_CHANGE_DETECTION) {
       // ******** DOM WRITE ****************
-      let node: VirtualNode;
-      for (var i = 0; i < this._nodes.length; i++) {
-        node = this._nodes[i];
-        if (node.hasChanges) {
-          node.view['detectChanges']();
-          node.hasChanges = false;
-        }
-      }
+      this.detectChanges();
 
       if (this._eventAssist) {
         // queue updating node positions in the next frame
@@ -573,7 +580,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     adjustRendered(this._cells, this._data);
 
     // ******** DOM WRITE ****************
-    this._cd.detectChanges();
+    this.detectChanges();
 
     // ******** DOM WRITE ****************
     this.setVirtualHeight(