Knockout 3.5.0 arrayChange

Question

I have been facing some issues regarding "foreach" binding to an ko.observableArray for knockout, specifically knockout 3.5.0. The "foreach" binding is creating 2 elements on the U.I side while in the current data context, i am only having one single object within an observableArray. i am binding it as follows:

<!-- ko foreach: { data: $root.(...my own javascript function)') } -->
...
<!-- /ko -->

What i am doing here is that i am manually adding a new entry into an empty observableArray by calling .push() on the observableArray. The entry is added successfully to the observableArray, however it will show 2 UI elements instead of one even though I am only pushing in one entry into the observableArray.

However, if i set the attribute "includeDestroyed: false", it seems that the problem will disappear.

From what i have gathered, there were a few changes in Knockout 3.5.0 that relates to the implementation of foreach binding being changed in knockout. There has been a change to the implementation of "arrayChange" which detects any changes in the knockout observable array.

What I would like to know is the exact flow of what goes on during an "arrayChange" event, and is there any way i can find out how an empty observableArray handles a "push" function

Answer 1

From the official Knockout github page, when looking into release changelogs you can spot the following:

To improve performance when array changes are from a known, single operation, such as push, the foreach binding no longer filters out destroyed items by default. To turn this off and filter out destroyed items, you can set includeDestroyed: false in the foreach binding or set ko.options.foreachHidesDestroyed = true to use the previous behavior by default.

So you can either set the "ko.options" globbaly, or set the flag like you do.

For more info you can look here. As for the flow of the event, i suggest looking into the debug version of ko 3.5, along with a debugger and coffe!