Question

我有单维数组{1,2,3,4 ..}，其中4是3的孩子，3是2的孩子，等等。我需要使用knockout js将元素显示为树视图结构。是否可以在不创建父子数组结构的情况下完成它？

Answer 1

是的，这是可能的。看看这个小提琴：http://jsfiddle.net/eF5VL/

解决方案的核心是函数childrenOf，它过滤普通的项目数组，并仅重新启动指定父项的子项。请注意，如果您可以观察到普通数组并且要更改主题，则此函数也可能是ko.computed。

var viewModel = {
    items: [
        { id: 1, parent: 0, name: "item 1" },
        { id: 2, parent: 0, name: "item 2" },
        { id: 3, parent: 2, name: "item 2.1" },
        { id: 4, parent: 2, name: "item 2.2" },
        { id: 5, parent: 0, name: "item 3" },
        { id: 6, parent: 5, name: "item 3.1" },
        { id: 7, parent: 6, name: "item 3.1.1" },
        { id: 8, parent: 0, name: "item 4" }
    ],
    childrenOf: function(parent){
        return ko.utils.arrayFilter(
            viewModel.items,
            function(item){ return item.parent == parent; }
        );
    }
};

ko.applyBindings(viewModel);

标记：

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

<ul data-bind="template: { name: 'tree_item', foreach: childrenOf(0) }"></ul>

标记也很简单：每个树项只有一个模板。

<强>更新

如果您确定您的商品已正确排序，您可以使用我在此处回答的其他解决方案：How to display a json data in a tree model using knockout?

您只应对项目进行一次预处理，以定义每个项目的嵌套级别。

树状结构与单维数组

1 个答案: