ノックアウトソート可能な、重複（ツリー構造を作る）

Question

私はソート可能なノックアウトで編集可能なツリー構造を作り、この偉大な例を見つけています：http://jsfiddle.net/rniemeyer/Lqttf

正常に動作しますが、私は変わって、私は、ルートノードのリストを持っていますルートノードのバインディングは、ツリー項目のソート可能なリストにもなります。フィドル：あなたはA、その後BにBをドラッグした場合

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

：http://jsfiddle.net/yyqnhngm

新しいテンプレートのマークアップは、この（ルートULはsortable、元のようにtemplateを結合していないことを注意してください）のように見えますがAに移される代わりににコピーされます。それは私が原因と解決策を探している問題です。私がすぐに考えているのは、ソート可能なのは、マークアップ/ htmlの問題のため、アイテムが同時に両方のリストにドラッグされていると思っているが、どう見えるか分からないということだ。

注：すべてのアイテムをルートノートにラップすることができますが、それは私の目的にはあまり意味がありません。

Answer 1

「普通の」配列はサポートされていないようです。 viewmodelの配列をobservableArrayに変更すると、必要なバーチャルが得られます。すなわち：参考

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

：

knockout-sortable readme（強調鉱山）によれば：

ノックアウト・ソートは、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