Knockoutjs with jQuery UI Sortable

Question

I'm working with the Google Groups on Knockout's forums for help with this too - but I figure a bigger audience can never hurt the situation.

I am trying to get KO to work with a situation using jQuery UI's 'Sortable' plugin. I have my code posted here.

http://www.pastie.org/1285716

Attempting to use a custom binding...

        ko.bindingHandlers.onReceiveItem = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                $(element).bind("sortreceive", function (event, ui) {
                    ko.bindingHandlers.onReceiveItem.update(element, valueAccessor, allBindingsAccessor, viewModel);
                });
            },
            update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                var bindings = allBindingsAccessor();
            }
        };

The goal is that when the Sortable List receives an item, it can get the item and add it to the other observableArray.

This isn't quite working for me, though. I'm having difficulty getting the event to fire like I want it. The way I have it set up, it does fire, but it only returns a 'true/false' value. I was hoping someone else might have an idea of what I am doing wrong and know how to fix it.

(to use the code, you need to reference

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="Stylesheet" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>

at the top, and then the newest version of Knockout (1.1.1)

http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.1.debug.js

Answer 1

I reworked the sample and came with a nearly complete bindingHandler, it doesn't require an id attribute and it also handles reordering. Here's the code:

http://jsbin.com/knockoutsortable/20/edit

usage:

• It's using the template.foreach binding to find out what's the associated array in the viewModel.

• You can use databind="foreach: Products, sortable: true" to enable sorting inside a single array with no options.

• It's working with observableArray objects.

• It's building the jQuery sortable by itself, you can pass the same options object in the binding than in the jQuery.sortable constructor.

Answer 2

I didn't realise Steve had already answered this before I had finished. Here you go though, slightly different way than him.

Sortable makes this a lot harder, this would have been far easier with a drag and drop binding bound to each product. The issue with sortable is you are binding on the whole list instead of the items.

http://www.pastie.org/1432093