在 Knockout ObservableArray 中反映 HTML 列表排序顺序答案

【问题标题】：Reflecting HTML List Sorting Order in Knockout ObservableArray在 Knockout ObservableArray 中反映 HTML 列表排序顺序
【发布时间】：2016-02-20 20:52:53
【问题描述】：

我有一个小的 Knockout JS，它从一个可淘汰的 observableArray 中填充一个列表。现在我已经使列表可以按 html 属性排序，没有来自 js 的特殊功能或任何自定义剔除模板。现在列表可以作为拖放排序，这正是我需要的，但它并没有反映在淘汰赛中。可能是因为它只是 html 的 UI 表示形式发生了变化，但 ObservableArray 本身的元素并没有改变。现在我如何以最小的变化实现这一目标。

JS 小提琴：http://jsfiddle.net/qm3somre/1/

html:

<ul id="sortable" sortable="true" style="list-style:none" data-bind="foreach: columns">
    <li>
        <span data-bind="text: $data"></span>
    </li>
</ul>
<textarea data-bind="text:columns"></textarea>

脚本：

var ViewModel = function() {
    var self = this;
    self.columns = ko.observableArray(["Jenny","Jennifer","Bob","Cat","Billy"]);
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
};

ko.applyBindings(new ViewModel());

【问题讨论】：

欢迎。你能解释一下“不反映在淘汰赛中”是什么意思吗？
如果你看到我发布的 js fiddle，在 UI 中对列表进行排序不会改变列表中元素的实际顺序。我也在文本区域中显示列表。更改列表的顺序不会更改文本区域中事物的顺序，这意味着剔除可观察层次结构不会改变。

标签： javascript sorting knockout.js

【解决方案1】：

您的视图模型代码中的 jQuery 告诉您需要一个自定义绑定处理程序。 https://github.com/rniemeyer/knockout-sortable

【讨论】：

【解决方案2】：

您必须为此使用自定义绑定。一个已经可用here。

会是这样的

<ul data-bind="sortable: columns">
  <li data-bind="text: $data"></li>
</ul>

Jsfiddle：http://jsfiddle.net/79caepvx/

【讨论】：

谢谢 Dandy，我已经看到了，但它是由其他人编写的自定义绑定，如果不包括许可证，我就无法使用它，这会导致有人在办公室和批准中审查它，什么不是废话。有没有办法捕捉 UI 的状态。现在我想，我不能得到 HTML 元素，列表，然后读回并按那个顺序使用它，因为我只需要在用户按下 OK 按钮时使用那个顺序，我基本上不需要它动态的。
它就像一个魅力。我没有使用淘汰的 observableArray，而是得到了 html 元素并遍历了它的子列表并得到了排序顺序:)