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?
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?