user-interface - 淘汰赛时树视图的 UI 冻结问题

Question

我有一个使用敲除模板构建树视图的场景，当我尝试加载具有 10-15 个子节点的 30 -40 时，每个子节点可能有也可能没有 10-15 个子节点。所以这里的问题是当我尝试搜索任何节点时加载需要时间，有时我会遇到 ui 冻结问题。有人可以帮助解决这个问题。

I/p 是这样的

self.items = ko.observableArray([
        { name: "name1", viewable: true, children: [
            { name: "name1-1", viewable: true},
            { name: "name1-2", viewable: false},
{ name: "name1-4", viewable: false},
{ name: "name1-3", viewable: false}
        ] },
        { name: "name2", viewable: false, children: [] },
        { name: "name3", viewable: true, children: [
            { name: "name3-1", viewable: true},
        ] },
            { name: "name4", viewable: true, children: [] }
    ]);

并且为了过滤我使用这个代码

root.children().forEach(function setVisible(child) {
                        child.children().forEach(setVisible);// descend into the tree first...                 
                        child.isVisible(                        // and then we can decide child visibility
                            child.name().toLowerCase().includes(searchValue) ||
                            child.children().some(child => child.isVisible())
                        );
                        child.isSelectable(child.isSelectable() && child.isVisible())  // and then we can decide child visibility
                    });
                    root.children.valueHasMutated();

标签： user-interfaceknockout.jssearchfiltercollection