Knockout Sortable list not working offset by new items added

Question

When I add items to my list (by clicking the "add series" button) it causes my list to not sort properly. E.G. If I click the "add series" button and then try to move "seriesname232" inbetween items "trrde" and "1", then it will move it down one more than it should (below the "1"). I believe that this is because the sortable list isn't taking into account that something was added to it. Below is an example:

http://jsfiddle.net/thebassix/yTAXh/

<div id="results">
            ---Hidden---
            <ul id="hidden" data-bind="sortable: { data: hiddenSeries, afterMove: hide}">
                <li data-bind="visible: Hidden, text: Name"></li>
            </ul>

    ---Unhidden---         
            <ul id="unhidden" data-bind="sortable: { data: unhiddenSeries, afterMove: unhide}">
                <li data-bind="visible: !Hidden(), text: Name"></li>
            </ul>
</div>
<hr/>
<div>All</div>
<ul data-bind="foreach: series">
    <li>
        <span data-bind="text: Name"></span> - 
        (<span data-bind="text: Hidden"></span>)
    </li>
</ul>
<input id="btnAddSeries" data-bind="click: addSeries" title="Add Series" class="ews_button" type="button" value="Add Series" />

Answer 1

The issue is that the Series object that you are adding has _destroy as an observable. Generally, _destroy is just a normal property, as the destroy function of KO set's it as a normal property.

So, your issue will be fixed, if you do not make _destroy an observable in your Series constructor like:

self._destroy = data._destroy;

Updated sample: http://jsfiddle.net/rniemeyer/63rup/

Additionally, I just added a fix to the sortable plugin that will unwrap _destroy anyways, so this would not have been a problem.