Revisiting jQuery UI Sortable with Knockout

[Stacey Thornton]

Hey there, I am back with another annoying question! I have come back
to my project that works with Knockout, and so I am catching up again.
In reference to the thread ..
http://groups.google.com/group/knockoutjs/browse_thread/thread/4c8f5e42d2713c77/450e409fbf1c2faa?lnk=gst&q=jquery+ui

I greatly appreciate your response, and it does solve my problem - but
like any programmer, fixing the problem isn't always my goal, I want
to understand what is going on. I wanted to get some clarification on
some things to make absolutely sure I get what is going on here. I
have your code and it works fine, but I am still kind of lost.

http://www.pastie.org/1594220

I have thrown up this side by side comparison (roughly) to try and
better understand it. Perhaps I am just an amateur, but when reading
javascript I have a difficult time actually seeing what is different.

To cite your exact statement

"There's no real difficulty with doing this - you just need to add
some
kind of unique ID to the model items so that you can match up the DOM
elements that jQuery UI gives you back to the original model items.
Once you've got those IDs, just move the corresponding objects around
in the view model. "

So let me see if I get this right...

In my code, what I tried to do is bind "sortreceive" (Line 29 of my
original javascript code) to function 'update', (Line 33) using the
same paramters that jQuery UI would pass (event, ui) and tried to
deserialize the passed object through unwrapObservable. This was an
incorrect approach.

What you Steve is doing here is what confuses me. It works, but I
don't really understand why it works. Starting at Line 40 of Steve's
code..

ko.bindingHandlers.onReceiveItem = {
init: function (element, valueAccessor,
allBindingsAccessor, viewModel) {
var callback = valueAccessor();
$(element).bind("sortreceive", function (event,
ui) {
var receivedIds = $.map(ui.item,
function(item) { return $(item).attr("data-id") });
callback.call(viewModel, receivedIds);
});
}
};

First of all, even in my own code, I don't remember what 'sortreceive'
is. Where are we getting this value from? I don't even recall why I
used that in my own code... is the string passed in here arbitrary? Is
it just the name of some triggered event that doesn't have to relate
to anything? I feel this is not clear in the Knockout Documentation.

So then, on 'sortreceive', we are triggering the same parameters that
jQuery UI expects (event, ui). Now here is where I get really lost.

var receivedIds = $.map(ui.item, function(item) { return $
(item).attr("data-id") });

$.map(ui.item, function(item) { return $(item).attr("data-id") } ); --
I read this as "Map the data coming in and perform this to it. For
whatever is in ui.item, return the attribute 'data-id'". Again, I
don't feel this is made explicitly clear in the documentation. I
really feel that functions like this could use more love in the docs.

Continuing on. What is 'data-id'? I see it declared in your HTML code,
but that's not a valid HTML attribute. Is that just part of how HTML5
works?

Moving on, so now we call upon something called 'callback'? What is
callback? Where is it defined? Is this just part of Javascript or is
it part of jQuery or is it part of Knockout? I've dug around and I
actually can't find a lot of documentation on it from any of those
three sources other than ambiguous usage. This is where I am the MOST
lost.

Why does 'callback.call(viewModel, receivedIds)' work? I don't see
where in the onReceiveItem declaration anything that tells it which of
the functions in the viewModel to run. I see it down in the HTML..

<ul id="sortable1" class="connectedSortable" data-
bind="template: 'tmpProducts', onReceiveItem: makeUnselected"></ul>
<ul id="sortable2" class="connectedSortable" data-
bind="template: 'tmpSelected', onReceiveItem: makeSelected"></ul>

But I am not unclear as to why javascript, or knockout, or even
jQuery, is understanding what to do in viewModel. Can you see my
confusion?

Doing a lot of digging I think 'callback' is just part of javascript,
so that's not KO's responsibility - but I think a few parts of this
are still kind of unclear from the KO side. In general, these are my
questions, and my suggestions.

- What is $.map? I can see it in the source code, but there's little
to really explain what it is. Have I just missed the documentation for
it? I am looking through http://knockoutjs.com/documentation/introduction.html.
- What makes callback.call() understand what to pass back to
viewModel?