Knockout-Sortable catch complex Objects

Question

I'm using Knockout.js for my page. My ViewModel contains an Array of Objects. Each Object contains an Array of Childs. More general this should represent a table containing columns and the column-contents.

first i'm dealing with foreach:itemArray to get the Columns. Then i'm using a nested foreach:childs, where childs is the array of column-contents.

My Childs should be draggable between the Columns. Therefore i replaced the nested foreach with a js i found

https://github.com/rniemeyer/knockout-sortable

http://jsfiddle.net/rniemeyer/Jr2rE/

Again with code - first stage:

<div id="lanesContainer" data-bind="foreach: lanes">

Then following the nested foreach (within #lanesContainer)

<ul data-bind="sortable: { template: 'laneTemplate', data: childs, afterMove: $root.dropCallback }">

My Items are now draggable, but dropping is somehow failing. My Debugger breaks at the following part of the js:

//take destroyed items into consideration
if (!templateOptions.includeDestroyed) {
  targetUnwrapped = targetParent();
  for (i = 0; i < targetIndex; i++) {
    //add one for every destroyed item we find before the targetIndex in the target array
    if (targetUnwrapped[i] && targetUnwrapped[i]._destroy) {
      targetIndex++;
    }
  }
}

It breaks at third line, because targetParent is an Object, not a function. How can i solve the Problem?

Answer 1

OK thanks so far. My ViewModel contains a function, which is called on each drop.

self.dropCallback = function (arg) {
    var item = arg.item;
    var sourceParent = arg.sourceParent();
    var targetParent = arg.targetParent();
    blah(); //console.log("Moved '" + arg.item.name() + "' from " + arg.sourceParent.id + " (index: " + arg.sourceIndex + ") to " + arg.targetParent.id + " (index " + arg.targetIndex + ")");
};

The Variables sourceParent and targetParent now represent the Arrays which were used for the foreach. How can i 'walk' one more level up, to the next parent?

Answer 2

Change targetUnwrapped = targetParent();

to

targetUnwrapped = ko.utils.unwrapObservable(targetParent);