Question

我一直在寻找使用knockout在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; }
}

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

我正在试图找出一种方法来递归创建这些列表并将它们读回来，以便我能够使某些东西发挥作用。

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

Answer 1

使用以下jsfiddle，我设法使用knockout-sortable创建一个工作版本：http://jsfiddle.net/rniemeyer/UHcs6/。

为了实现这一点，我只是略微修改了源代码。在从ajax动态加载之后，最难的部分是淘汰以找到所有内容。

为了让knockout正确绑定到项目列表，我将他们的映射插件与他们的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>

具有Knockout绑定的Nestable可排序列表？

1 个答案: