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

by fastfasterfastest

HTML

<script src="http://www.14designs.com/knockout-2441-arrayChange-update.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 -->
<!-- ko if: translatedPhrases --><!-- /ko -->

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

JavaScript

function ViewModel() {
  this.phrases = ko.observableArray([ ]);
  this.translatedPhrases = ko.pureComputed(function(){
    return this.phrases().map(function(phrase){ return { phrase: phrase.toUpperCase() }; });
  }, this);
}

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

ko.applyBindings(new ViewModel());