KnockoutJS Sortable group observableArray按字段和條件排序

Question

我最近使用了RP Niemeyer的一個很棒的堆棧溢出答案，KnockoutJS ObservableArray data grouping，允許我通過一個字段對observableArray中的數據進行分組。這是出色的工作。問題在於它與Knockout Sortable沒有很好的搭配。檢索sourceParent存在問題。請看下面的小提琴：http://jsfiddle.net/mrfunnel/g6rbc

基本上我有一個嵌套列表，其中任務分組爲路由（未計劃）和另一個正義任務列表（計劃）。我希望能夠將路線和任務拖入預定。如果路線被拖入，則需要將其分解爲任務。

任何援助將不勝感激。

Answer 1

sortable綁定僅適用於observableArrays，因爲它需要知道如何將放下的值寫回數組。通過計算可觀察的結果，它將無法以有意義的方式編寫它。

以下是您可能能夠構建代碼的另一種方法。基本上，你會建立一個observableArray路由，每個路由包含一個observableArray的任務。喜歡的東西：

self.tasks.subscribe(function(tasks) { 
    var routes = [], 
     routeIndex = {}; 

    ko.utils.arrayForEach(tasks || [], function(task) { 
     var routeId = task.routeId(), 
      routeTasks = routeIndex[routeId]; 

     //first time that we have seen this routeID 
     if (!routeTasks) { 
      //add it to the index, so we can find it without looping next time 
      routeIndex[routeId] = routeTasks = { id: routeId, tasks: ko.observableArray() }; 
      //add it to the array that we will eventually return 
      routes.push(routeTasks); 
     } 

     routeTasks.tasks.push(task); 
    }); 

    //return an array of routes that each contain an array of tasks 
    self.tasksByRoute(routes);  

}); 

然後，你可以使用你的計劃任務的beforeMove回調檢查它是否是一個路由，而不是一個單獨的任務，做這樣的分裂：

self.myDropCallback = function(arg) { 
    var spliceArgs; 
    //determine if this is really a route rather than an individual task 
    if (arg.item && arg.item.tasks) { 
     //we will handle the drop ourselves, since we have to split into tasks 
     arg.cancelDrop = true; 

     //build up args, since first two need to be new index and items to remove 
     spliceArgs = [arg.targetIndex, null]; 
     //add the tasks to the args 
     spliceArgs.push.apply(spliceArgs, arg.item.tasks()); 
     //splice in the tasks at the right index 
     arg.targetParent.splice.apply(arg.targetParent, spliceArgs); 

     //remove the originals, after cancel has happened 
     setTimeout(function() { 
      arg.sourceParent.remove(arg.item);  
     }, 0);     
    } 
}; 

這裏是一個更新的樣本：http://jsfiddle.net/rniemeyer/BeZ2c/。我不確定是否允許在路線之間進行排序，但是我禁用了樣本中的排序。您可以將單個任務或整個路線放入計劃任務中。