Javascript 一维数组的树状结构

我有一维数组{1,2,3,4..}，其中4是3的子数组，3是2的子数组，依此类推。我需要使用knockoutjs将元素显示为树视图结构。不创建父子数组结构是否可以执行此操作？

是的，可以。看看这把小提琴：

解决方案的核心是函数

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>

标记也清晰简单：每个树项目只有一个模板

更新：

如果您确信您的物品已正确分类，您可以使用另一种解决方案，正如我在这里回答的：

---

您只需对项目预处理一次，即可为每个项目定义嵌套级别。

为什么不希望使用父子数组结构？如果概念上你有父母和孩子，我认为viewmodels应该反映这一点。我有一个没有父子结构的数组。要创建父子关系，我需要再次遍历整个数组，这是我想要避免的。您可以使用计算的观察值，并根据每个元素在数组中的位置以不同方式显示每个元素，但这仍然需要遍历数组一次。我认为你不可能不迭代就成功。嗨，帕克斯，我知道至少会有一次迭代（每个绑定都会被淘汰）。这是无法避免的。然而，当我们知道下一个数组元素是当前数组元素的子元素时，我们不能使用这个信息来避免额外的迭代吗。如果没有办法的话，我一定能找到已知的根。