javascript - Knockout - 基于指向主键列的父 id 绑定(bind)树结构

Question

我正在尝试通过以下 this 绑定(bind)从树结构中的存储过程返回的数据。 knockout 文档。

我正在从存储过程中获取以下格式的数据:

ID  | Name                     | ParentID
1   | Parent 1                 | 0
2   | Parent 2                 | 0
3   | Parent 1 Child 1         | 1
4   | Parent 2 Child 1         | 2
5   | Parent 1 Child 1 Child   | 3
6   | Parent 2 Child 1 Child 1 | 4
7   | Parent 2 Child 1 Child 2 | 4

在 ParentID 列中，0 表示根项，所有其他项都指向父子关系中的 ID 列。可以有 N 级父子关系，我需要将它们绑定(bind)在树结构中，例如:

Parent 1
  Parent 1 Child 1
    Parent 1 Child 1 Child

Parent 2
  Parent 2 Child 1
    Parent 2 Child 1 Child 1
    Parent 2 Child 1 Child 2

在文档中，它显示了在 click 事件上绑定(bind)子项目，但我需要立即绑定(bind)所有项目，这是我感到困惑的部分。有没有其他方法可以根据上面给出的存储过程结果使用 knockout 绑定(bind)树结构？

Answer 1

最简单的方法是创建 computed仅表示源数组中的根项和一个辅助函数来获取当前项的子项:

var treeData = [
    { id: 1, name: "Parent 1", parent_id: 0 },
    { id: 2, name: "Parent 2", parent_id: 0 },
    { id: 3, name: "Parent 1 Child 1", parent_id: 1 },
    { id: 4, name: "Parent 2 Child 1", parent_id: 2 },
    { id: 5, name: "Parent 1 Child 1 Child", parent_id: 3 },
    { id: 6, name: "Parent 2 Child 1 Child 1", parent_id: 4 },
    { id: 7, name: "Parent 2 Child 1 Child 2", parent_id: 4 }
];

function ViewModel(data) {

    this.allItems = ko.observableArray(data);

    this.rootItems = ko.computed(function(){
        return ko.utils.arrayFilter(this.allItems(), function(item){
            return item.parent_id == 0;
        });
    }, this);

    this.children = function(parent){
        return ko.utils.arrayFilter(this.allItems(), function(item){
            return parent.id == item.parent_id;
        });
    };

}

然后您可以使用命名模板输出任意深度的嵌套列表，例如:

<ul data-bind="template: { name: 'list-item', foreach: rootItems }"></ul>

<script type="text/html" id="list-item">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'list-item', foreach: $root.children($data) }"></ul>
    </li>
</script>

结果:http://jsfiddle.net/jwquemL6/

附注这是非常简化的工作示例，因此您可能希望将所有项目包装到特定的数据结构中并防止每个 <li>节点有 <ul> (甚至是空的)。

希望您理解该方法。