Question

So I have a collection that I loop through to display some data. There’s a remove button next to each row to remove a given row’s $data from the observableArray collection. It removes it fine, but here’s the problem. Some of the input fields on each row have a custom binding that I created to do some validation. As the user is interacting with the form, the update event of the custom binding gets fired as it should. But when the user removes a row, the update event does NOT fire!

This completely messes up the state of my validation. Does anyone know what’s going on here?

Here’s a jsfiddle for this issue.

Update: Also, in situations where the update event does get called in result of a change, the order in which the events get called are problematic. If I remove an element, the update event gets called first due to some update to an observable at which point the element itself is still in the DOM. So I have no way of knowing inside the update event whether or not the element that is being updated still exists in the DOM or not!

Answer 1

In your example the binding is only on the obervable item not on the array. Add your binding to the observableArray – append to the foreach binding in your example

<div data-bind="foreach: firstNames, validators:true">
    <input type="text" data-bind="value: firstname, validators:true" />
    <span data-bind="text: firstname"></span>
    <input type="button" value="remove" data-bind="click: $root.deleteRow" /><br />
</div>

greetings @all