knockout.js - Knockoutjs: index param is always 0 in beforeRemove callback of foreach binding

Question

According to documentation, the beforeRemovecallback in foreach binding will supply the following parameters to your callback:

1. A DOM node being added to the document
2. The index of the added array
3. element The added array element

But I am getting 0 always in the index param of my callback function. Can somebody tell my what's wrong? Here is the code:

https://codepen.io/gxzzin/pen/KKNPKeO?editors=1010

question from:https://stackoverflow.com/questions/65923407/knockoutjs-index-param-is-always-0-in-beforeremove-callback-of-foreach-binding

Answer 1

Looks like a bug in knockout 3.5.0. The same code works with version 3.4.2, have a look at the abbreviated example below:

function RootViewModel(){
  var self = this;
  self.Items = ko.observableArray([1, 2, 3, 4, 5]);

  self.BeforeRemove = function(element, ind, item) {
    console.log("Index: " + ind);
    $(element).remove();
  };
};

ko.applyBindings(new RootViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="container p-5">

  <button data-bind="click: function () { Items.push(Items().length + 1) }">Add</button>

  <ul data-bind="foreach: { data: Items, beforeRemove: BeforeRemove }">
    <li data-bind="text: $data, click: function (i) { $root.Items.remove(i) }"></li>
  </ul>

</div>