Question

我有一个小的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（））;

Answer 1

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

Answer 2

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

这将是

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

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

反映Knockout ObservableArray中的HTML列表排序顺序

2 个答案: