淘汰赛排序，使重复（使树形结构）

我想提出一个可编辑的树结构淘汰赛排序，发现这个很好的例子：http://jsfiddle.net/rniemeyer/Lqttf 淘汰赛排序，使重复（使树形结构）

这工作正常，但我有根节点的列表，所以我改变了根节点绑定也是一个可排序的树项目列表。小提琴：http://jsfiddle.net/yyqnhngm

新的模板标记看起来像这样（请注意，根UL是sortable在原来的结合，而不是template为）：

<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插入A，那么B将复制，而不是转移到A.这是我正在寻找的原因和解决方案的问题。我的直接想法是可排序的认为这个项目同时被拖入列表中，也许是因为标记/ html问题，但我看不到。

注意：我知道我可以将所有项目都包装成根音，但这对我的目的没有多大意义。

来源

2016-06-13 altschuler

不图书馆需要的项目进行排序要在'observableArray'？如果我将'root'数组更改为'ko.observableArray'，则所有_seems_都可以正常工作。从文档：“knockout-sortable是Knockout.js的绑定，旨在将** observableArrays **与jQuery UI的可排序功能连接起来” – user3297291

我认为你是对的，似乎是这样。如果您可以提交答案，我会将其标记为解决方案:) – altschuler

在我看来，不支持“普通”数组。将视图模型中的数组更改为observableArray可为您提供所需的行为。即：

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

参考：

按照knockout-sortable readme（重点煤矿）：

敲除可排序为Knockout.js设计成与连接observableArrays的结合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

来源

2016-06-13 14:22:57 user3297291

淘汰赛排序，使重复（使树形结构）

回答

相关问题