descendant bindings of 'foreach' are evaluated when corresponding item in array is removed #2305

by fastfasterfastest

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.5.0.js"></script>
<button data-bind="click: function(){ this.phrases(this.phrases().length > 2 ? [ 'd', 'e' ] : [ 'a', 'b', 'c' ]); }">New Phrases</button><br/><br/>

<!-- remove this reference to translatedPhrases => works -->


<h4>Phrases / Translated Phrases</h4>
<ul data-bind="foreach: phrases">
  <li>
    <span data-bind="text: $data"></span>
    /
    <span data-bind="text: $parent.translatedPhrase($index())"></span>
  </li>
</ul>

<h4>Log</h4>
<ul data-bind="foreach: log">
   <li data-bind="text: $data"></li>
</ul>

JavaScript

function ViewModel() {
  this.phrases = ko.observableArray([ 'a', 'b', 'c' ]);
  this.translatedPhrases = ko.pureComputed(function(){
    return this.phrases().map(function(phrase){ return phrase.toUpperCase(); });
  }, this);
  this.translatedPhrase = function(index){
    this.log.push('translatedPhrase(' + index + ')' + (index < this.translatedPhrases().length ? '' : ' - invalid index; there are only ' + this.translatedPhrases().length + ' phrases'));
    return this.translatedPhrases()[index];
  }
  this.log = ko.observableArray();
}

ko.options.deferUpdates = true;
ko.onError = function (error) {
    alert("knockout error\n" + error);
};

ko.applyBindings(new ViewModel());