knockout issue #2450

by fastfasterfastest

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.5.0.debug.js"></script>
<button data-bind="click: moveViewport">Move viewport</button>
<div>
  <!-- ko foreach: { data: viewportData, as: 'item' } -->
  <div>
    <!-- ko text: item.name --><!-- /ko -->
  </div>
  <!-- /ko -->
</div>

JavaScript

function ViewModel(viewportSize){
   
    this.data = ko.observableArray(ko.utils.arrayMap(new Array(100), function(v, i){ return { name: "item " + i }; }));
    this.viewportOffset = ko.observable(0);
    this.viewportData = ko.pureComputed(function(){
      var viewportData = this.data().slice(this.viewportOffset(), this.viewportOffset() + viewportSize);

			if(this.viewportOffset()!=0){
				viewportData[0] = this.data()[1];
				viewportData[1] = this.data()[9];
      }
      return viewportData;
    }, this);
    this. moveViewport = function(){
    	this.viewportOffset(this.viewportOffset()+viewportSize);
    };
	};
  
 
  ko.applyBindings(new ViewModel(2));