淘汰赛可排序-分散元素答案

【问题标题】：Knockout sortable - disseapring elements淘汰赛可排序-分散元素
【发布时间】：2013-11-20 07:53:21
【问题描述】：

当我在“foreach”绑定中使用“sortable”时，移动元素会使它们消失。更重要的是，数组位置正在更新中！

<div id="main">
<div data-bind="foreach: tasks">
    <div class="item" data-bind="sortable: $data">
        <label data-bind="text: name"></label>
    </div>
</div>
</div>

Fiddle example.

【问题讨论】：

标签： javascript jquery knockout.js mapping jquery-ui-sortable

【解决方案1】：

您的视图模型中有很多错误。

html:

<div id="main">
    <div data-bind="foreach: tasks">
        <div class="item" data-bind="sortable: tasks">
            <label data-bind="text: name"></label>
        </div>
    </div>
</div>

视图模型：

var Task = function(name) {
    this.name = name;
}

var InternalTasks = function(tasks) {
    this.tasks = ko.observableArray(tasks); 
}

var ViewModel = function() {
    var tasks1 = new InternalTasks([
        new Task("Get dog food"),
        new Task("Mow lawn"),
        new Task("Fix car"),
        new Task("Fix fence"),
        new Task("Walk dog"),
        new Task("Read book")
    ]);
    var tasks2 = new InternalTasks([
        new Task("aa"),
        new Task("bb"),
        new Task("cc"),
        new Task("dd"),
        new Task("ee"),
        new Task("ff")
    ]);
    this.tasks = ko.observableArray([tasks1, tasks2]);
};

ko.applyBindings(ko.mapping.fromJS(new ViewModel()));

【讨论】：

是的，但这不是解决方案。我需要创建可变数量的列，每个列都是可排序的。
也许可以工作，但我不需要一个可排序的列表（我知道怎么做），所以它完全没有帮助。
我已经更新了我的答案，下次请仔细描述您的问题。
好的，这个答案有效。我认为，我的问题被正确描述了——如果不必在 foreach 中使用 sortable，我就不会发布它。谢谢！