fix(virtual-repeat): handle bind with less items than whats fits in v…

…iew port Fixes #39
aurelia · Mar 24, 2016 · 9e6f121 · 9e6f121
1 parent eb65097
commit 9e6f121
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/array-virtual-repeat-strategy.js b/src/array-virtual-repeat-strategy.js
@@ -70,7 +70,8 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy {
       }
     }
     // add new views
-    for (let i = viewsLength; i < repeat._viewsLength; i++) {
+    let minLength = Math.min(repeat._viewsLength, items.length);
+    for (let i = viewsLength; i < minLength; i++) {
       let overrideContext = createFullOverrideContext(repeat, items[i], i, itemsLength);
       let view = repeat.viewFactory.create();
       view.bind(overrideContext.bindingContext, overrideContext);
@@ -225,12 +226,14 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy {
       let end = splice.index + splice.addedCount;
 
       for (; addIndex < end; ++addIndex) {
-        if (!this._isIndexBeforeViewSlot(repeat, viewSlot, addIndex) && !this._isIndexAfterViewSlot(repeat, viewSlot, addIndex)) {
+        if (viewSlot.children.length === 0 || !this._isIndexBeforeViewSlot(repeat, viewSlot, addIndex) && !this._isIndexAfterViewSlot(repeat, viewSlot, addIndex)) {
           let overrideContext = createFullOverrideContext(repeat, array[addIndex], addIndex, arrayLength);
           let view = repeat.viewFactory.create();
           view.bind(overrideContext.bindingContext, overrideContext);
           repeat.viewSlot.insert(addIndex, view);
-          if (repeat.viewSlot.children.length > repeat._viewsLength) {
+          if (!repeat._hasCalculatedSizes) {
+            repeat._calcInitialHeights(1);
+          } else if (repeat.viewSlot.children.length > repeat._viewsLength) {
             repeat.viewSlot.removeAt(repeat.viewSlot.children.length - 1, true, true);
             repeat._bottomBufferHeight = repeat._bottomBufferHeight + repeat.itemHeight;
           }

diff --git a/src/virtual-repeat.js b/src/virtual-repeat.js
@@ -39,6 +39,7 @@ export class VirtualRepeat {
   _isAttached = false;
   _ticking = false;
   _fixedHeightContainer = false;
+  _hasCalculatedSizes = false;
 
   @bindable items
   @bindable local
@@ -102,6 +103,7 @@ export class VirtualRepeat {
     this._switchedDirection = false;
     this._isAttached = false;
     this._ticking = false;
+    this._hasCalculatedSizes = false;
     this.viewStrategy.removeBufferElements(this.element, this.topBuffer, this.bottomBuffer);
     this.isLastIndex = false;
     this.scrollContainer = null;
@@ -121,8 +123,10 @@ export class VirtualRepeat {
     }
     let items = this.items;
     this.strategy = this.strategyLocator.getStrategy(items);
-    this.strategy.createFirstItem(this);
-    this._calcInitialHeights();
+    if (items.length > 0) {
+      this.strategy.createFirstItem(this);
+    }
+    this._calcInitialHeights(items.length);
     if (!this.isOneTime && !this._observeInnerCollection()) {
       this._observeCollection();
     }
@@ -330,14 +334,15 @@ export class VirtualRepeat {
 
   _getIndexOfFirstView() {
     let children = this.viewSlot.children;
-    return children[0].overrideContext.$index;
+    return children[0] ? children[0].overrideContext.$index : -1;
   }
 
-  _calcInitialHeights() {
-    if (this._viewsLength > 0 && this._itemsLength === this.items.length) {
+  _calcInitialHeights(itemsLength: number) {
+    if (this._viewsLength > 0 && this._itemsLength === itemsLength || itemsLength <= 0) {
       return;
     }
-    this._itemsLength = this.items.length;
+    this._hasCalculatedSizes = true;
+    this._itemsLength = itemsLength;
     let firstViewElement = this.viewSlot.children[0].firstChild.nextElementSibling;
     this.itemHeight = calcOuterHeight(firstViewElement);
     if (this.itemHeight <= 0) {
@@ -346,7 +351,10 @@ export class VirtualRepeat {
     this.scrollContainerHeight = this._fixedHeightContainer ? this._calcScrollHeight(this.scrollContainer) : document.documentElement.clientHeight;
     this.elementsInView = Math.ceil(this.scrollContainerHeight / this.itemHeight) + 1;
     this._viewsLength = (this.elementsInView * 2) + this._bufferSize;
-    this._bottomBufferHeight = this.itemHeight * this.items.length - this.itemHeight * this._viewsLength;
+    this._bottomBufferHeight = this.itemHeight * itemsLength - this.itemHeight * this._viewsLength;
+    if (this._bottomBufferHeight < 0) {
+      this._bottomBufferHeight = 0;
+    }
     this.bottomBuffer.setAttribute('style', `height: ${this._bottomBufferHeight}px`);
     this._topBufferHeight = 0;
     this.topBuffer.setAttribute('style', `height: ${this._topBufferHeight}px`);