Sorting the observed array distorts the “checked” binding

I have a viewmodel with an observable array of view models for children.

They must be sorted by the user, so I use the method sort()for observableArray:

function ViewModel() {
    this.items = ko.observableArray([/* ... some items ... */]);
    this.sort = function () {
        this.items.sort(function (a, b) {
            // comparison
        }
    }
}

Each item has an observable type, tied to a list of boxes using snapping checked.

<li>
    <input type="radio" value="A" data-bind="checked: type" /> A
    <input type="radio" value="B" data-bind="checked: type" /> B
    <input type="radio" value="C" data-bind="checked: type" /> C
    <input type="radio" value="D" data-bind="checked: type" /> D
</li>

The phenomenon is that when the array is itemssorted, the radio frames randomly lose their state, i.e. no dots are visible on the screen for a seemingly random subset of them - although their value is still stored in the viewmodel.

Try it for yourself: http://jsfiddle.net/yxg53bph/ - click "Sort" several times and observe the effect.

: ?


notifySubscribers() . , .

+4
1

jsfiddle name , .

, . , ( ).

name ( , 4 , 1 ckecked constrraint), , .

: jsfiddle

+3

All Articles