observableArray removeall then push items that look similar (clones) with one prop value different won't update list

[ericnewton76]

Seems strange because removeall calls valueHasMutated internally but there's something else in there trying to be a little "too" smart, a trackChanges or something perhaps?

My scenario calling a service with a lat/lng position, and getting an array of locations with distance calculated.

I first get the full list of locations, then when user clicks something with new position, I call service that calculates all the locations' distance from that address/position/etc, then I clone the items from the full list, adding distance property as I go.

allLocations = service.loadAllLocations(); //will return locations with distance:0
allLocationsMap = []
allLocations.forEach(function(item) { allLocationsMap[item.key] = item; });

vm.locations(allLocations);

$("button").click(function() {
  var distances = service.getDistanceFrom({address:$("#address").val()});

  vm.locations.removeAll();

  distances.forEach(function(item) {
    clone = Object.assign({},allLocationsMap[item.key]); //clone the orig location
    clone.distance = item.distance;
    vm.locations.push(clone);
  });
}

[ericnewton76]

Is it maybe because the list size is exactly the same, ie, 20 items before removeAll(), 20 items after push finishes?

What's also odd is the results are sorted by distance, and the DOMElements seem to get rearranged according to the sorting, but the internal fields don't get re-bound... showing the old distances, but sorted differently because the underlying objects have different distance calculations.

Seems like I need to somehow tell the children trackers within observableArray to refresh/reset or something. I'm stumped.

[ericnewton76]

https://stage-arbormemorial.cp-access.com/en/locations.aspx?province=Ontario&city=Toronto&postal=

You'll see the weird effect when you input a postal code like M8W 4H7 into postal code field (and click Search Locations. Note, when you click SearchLocations it uses HistoryJS to update URL wihtout browsing. If you go to url bar and then hit enter, with that postalcode querystring value filled everything works...

ko even changes the order of the branches according to the sort, but none of the rows' values' update according to the object. Granted, only one value changed, so knockout is trying to be efficient.

This jsfiddle does it similarly but seems to work
https://jsfiddle.net/enorl76/aj985phL/

[mbest]

The first link you provided is password-protected, and the jsfiddle link appears to have a bug. When I click the button, it throws an error: Unable to process binding "text: function(){return title }" Message: title is not defined

[mbest]

I was able to get your jsfiddle to work by changing line 60 to use allLocationsMap. I did not see any update problems.