带有敲除绑定的可嵌套可排序列表？答案

【问题标题】：Nestable Sortable List with Knockout Bindings?带有敲除绑定的可嵌套可排序列表？
【发布时间】：2017-02-24 08:22:39
【问题描述】：

我一直在考虑使用 knout 在 javascript 中构建一个可拖动、可排序的列表，并且我发现了几个可以处理该任务的严格基于 javacript 的实现，但我无法让任何敲除绑定工作他们。

我查看了Knockout Sortable，甚至this question 似乎也解决了类似的请求，但它似乎并不能完全满足我的需求。

我正在寻找与this nested sortable 插件更相似的东西，它适用于淘汰赛。

基本上我的对象结构类似于以下内容：

public class MenuItem {
    public int Id { get; set; }
    public string Name { get; set }
    public MenuItem Children { get; set; }
}

每个菜单项可以包含任意数量的其他菜单项作为子项，这些子项可以有子项，依此类推。

我正在尝试找出一种方法来递归地创建这些列表并将它们读回，以便我能够做出一些工作。

有没有人尝试过类似的东西，或者已经有一些绑定？

【问题讨论】：

你看过这个吗？ stackoverflow.com/questions/34424283/…
我最终偶然发现了以下似乎可以满足我需要的 jsfiddle：jsfiddle.net/rniemeyer/UHcs6

标签： javascript jquery jquery-ui knockout.js

【解决方案1】：

使用以下 jsfiddle，我设法使用可淘汰排序制作了一个工作版本：http://jsfiddle.net/rniemeyer/UHcs6/。

为此，我只对源代码稍作修改。最难的部分是在从 ajax 动态加载后，如何正确找到所有内容。

为了让淘汰赛正确绑定到项目列表，我将他们的映射插件与他们的fromJS 方法结合使用。

首先您必须为对象定义模型。

var menuItem = function (id, name, menuId, pageId, icon, order, description, menuItems) {
    this.id = ko.observable(id || 0);
    this.name = ko.observable(name || "");
    this.menuItems = ko.observableArray(menuItems || []);
};

接下来，您必须从返回的 ajax 数据中构建对象。

$.ajax({
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: 'URL',
    success: function (data) {
        this.menuItems(ko.mapping.fromJS(data)());
        this.menuItems.notifySubscribers();
    }.bind(this),
    error: function (returndata) {
        alert("Error:\n" + returndata.responseText);
    }
});

从那里开始，如果您正确设置了递归模板，一切都应该正常工作，如下所示：

<span data-bind="text: name"></span>
<ul data-bind="sortable: { template: 'childTmpl', data: menuItems }"></ul>

<script id="childTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="sortable: { template: 'childTmpl', data: menuItems }"></ul>
    </li>   
</script>

【讨论】：