Question

I am trying to get knockout mapping plugin working with Ryan Niemeyer’s sortable plugin and am not having success. In my example if you try to sort an item into the middle of the list then it always puts it at the bottom. Sorting to the top of list works, but if you try to sort an item to anywhere else besides the top it will automatically go to the bottom of the list.

Example:
http://jsfiddle.net/thebassix/cKX53/1/

Here’s my html:

<div id="results">
            <h3>Tasks</h3>
            <ul data-bind="sortable: series">
                <li data-bind="text: Name"></li>
            </ul>
        </div>​

Answer 1

The issue looks like it is related to the mapping plugin turning your _destroy property into an observable. The functionality in Knockout core and in the sortable plugin that deals with _destroy expects it to be a plain property.

The mapping plugin does have a copy option that you can use to simply copy a property rather than create an observable. However, this only seems to work on the top-level properties, so if you are passing in an array directly, then you would probably need to setup your mapping options like:

var mappingOptions = {
    create: function(options) {
        return ko.mapping.fromJS(options.data, { copy: '_destroy' });
    }            
};

Sample: http://jsfiddle.net/rniemeyer/9UGKQ/