녹아웃의 정렬은 (트리 구조 만들기) 중복

Question

나는 넉 아웃 정렬과 편집 가능한 트리 구조를 만들고이 좋은 예 발견하고 있습니다 : 잘 작동 http://jsfiddle.net/rniemeyer/Lqttf

을,하지만 난을 변경 그래서 루트 노드의 목록을 가지고 루트 노드 바인딩은 트리 항목의 정렬 가능한 목록이기도합니다. 바이올린은 :

<script id="nodeTmpl" type="text/html"> 
    <li> 
     <a href="#" data-bind="text: name"></a> 
     <div> 
      <ul data-bind="sortable: { template: 'nodeTmpl', data: $data.children }"></ul>    
     </div> 
    </li> 
</script> 

<ul data-bind="sortable: { template: 'nodeTmpl', data: root }"></ul> 

당신은에 B를 드래그하면, B를 : http://jsfiddle.net/yyqnhngm 새 템플릿 태그는 다음과 같습니다

은 (루트 UL은 sortable 원본에 같은 template 바인딩이 아닌 것을 알) 이 A로 옮겨지지 않고으로 복사됩니다. 그 원인과 해결책을 찾고있는 문제입니다. 내 즉각적인 생각은 sortable이 마크 업/HTML 문제로 인해 항목이 동시에 두 목록으로 드래그되었다고 생각하지만 어떻게 볼 수없는 것입니다.

참고 : 모든 항목을 근음으로 묶을 수는 있지만 내 용도에는별로 의미가 없습니다.

Answer 1

"일반"배열은 지원되지 않습니다. viewmodel에서 배열을 observableArray으로 변경하면 필요한 bahavior가 제공됩니다. 즉 :knockout-sortable readme(강조 내)에 기재된

:

참고로

ko.applyBindings({ 
    root: ko.observableArray([ 
    new TreeItem("A", []), 
    new TreeItem("B", []) 
    ]) 
}); 

녹아웃 - 정렬 인으로을 observableArrays 연결 설계 Knockout.js 바인딩 jQuery UI의 정렬 가능한 기능.

나는 또한 정확히 무엇이 잘못되었는지 설명 할 수있는 출처를 찾으려고했지만 정확한 원인을 찾을 수 없었다. 저자의 생각을 적어도 설명하는 발췌 문장을 찾았습니다.

이 코드는 플러그인의 기본 동작이 splice 메서드를 사용하여 배열간에 요소를 이동하는 것을 보여줍니다. 이 경우 예외가 트리거되지 않은 이유를 설명 할 수 있습니다. Array.prototype 및 ko.observableArray은 모두 splice 메서드를가집니다. 둘 다 비슷한 주장을한다.

코드 블록의 마지막 주석은 targetParent과 sourceParent이 관찰 가능할 것이라고 설명합니다.

if (!sortable.hasOwnProperty("strategyMove") || sortable.strategyMove === false) { 
    //do the actual move 
    if (targetIndex >= 0) { 
    if (sourceParent) { 
     sourceParent.splice(sourceIndex, 1); 

     //if using deferred updates plugin, force updates 
     if (ko.processAllDeferredBindingUpdates) { 
     ko.processAllDeferredBindingUpdates(); 
     } 
    } 

    targetParent.splice(targetIndex, 0, item); 
    } 

    //rendering is handled by manipulating the observableArray; ignore dropped element 
    dataSet(el, ITEMKEY, null); 
} 

출처 : https://github.com/rniemeyer/knockout-sortable/blob/master/src/knockout-sortable.js#L250