KnockoutJS 정렬 가능한 그룹 observableArray by field 및 조건부 정렬

Question

최근 필드에서 observableArray의 데이터를 그룹화 할 수 있도록 RP Niemeyer, KnockoutJS ObservableArray data grouping의 훌륭한 스택 오버플로 응답을 사용했습니다. 그것은 훌륭하게 작동합니다. 문제는 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/. 나는 당신이 노선 사이에서 분류하는 것을 허용하는지 확실하지 않지만, 나는 그 표본에서 그것을 무력화시켰다. 개별 작업이나 전체 경로를 예약 된 작업으로 드롭 할 수 있습니다.