可观察元素的数组未更新

Question

I have observable array with some objects inside of it. One of the properties of this object is an array of observable elements (dates in a string format). Here is a small reproducible example:

this.groups = ko.observableArray([{
    name:       ko.observable("name"),
    deadlines:  [
        ko.observable("2010-02-08"),
        ko.observable("2013-06-18"),
        ko.observable("2015-01-23"),
    ]
}]);

I am representing them in the following format:

<tbody data-bind="foreach: groups">
        <tr>
            <td>
                <input type="text" placeholder="name" data-bind="value: name"><br><br><br>
                <span data-bind="text: name"></span>
            </td>
            <!-- ko foreach: deadlines -->
            <td>
                <input type="date" data-bind="value: $data"><br><br><br>
                <span data-bind="text: $data"></span>
            </td>
            <!-- /ko -->
        </tr>
    </tbody>

The problem is that when I am updating one of the dates, they are not updating. Here is a JSfiddle example : as you see when 2010-02-08 is updated the underlying text stays the same.

At the beginning I thought that it has something to do with date in a binding, but after trying this I see that it is not the case. Any idea of what went wrong?

Answer 1

Bind to the $rawData instead.

<!-- ko foreach: deadlines -->
<td>
    <input type="date" data-bind="value: $rawData"><br><br><br>
    <span data-bind="text: $data"></span>
</td>
<!-- /ko -->

Items of arrays are always unwrapped, so you were effectively binding to the value of the observable, not the observable itself. The $rawData variable gives you access to the not-unwrapped item.