knockoutjs observable array of observable objects binding

Question

I have an issue in that when I am adding a object containing observable properties to an observablearray the interface is not being updated.

I have studied similar questions on this forum ( KnockoutJS - Observable Array of Observable objects ) but I still cannot get the syntax correct, so after a day of trying I am turning to the expects for help please.

I have created an exmaple of what I am trying to achieve

https://jsfiddle.net/ryrpnbr9/23/

When you press the Add button a BatchItem object is created and is added to the BatchItems observablearray of Batch. I can see that the object is being updated.

I have a table with the following binding defined

<tbody data-bind="foreach: Batch.BatchItems()">
    <tr>
        <td><span data-bind="text: DocumentType"></span></td>
        <td><span data-bind="text: ItemType"></span></td>                            
    </tr>
</tbody>

Any help would be much appreciated. Thanks

Answer 1

Instead of self.Batch.BatchItems().push(bi); , you'll have to call self.Batch.BatchItems.push(bi);

The difference between the two:

The first pushes directly to the array that is inside the observable array. This works, but knockout won't be able to tell something's changed...

The second one uses the push method inside ko.observableArray . This push method again pushes to the inner array, but it also calls valueHasMutated . This triggers the dependency updates required to update your models and UI.

Updated fiddle with the removed ()