Question

我有一个observableArray看起来像这样：

this.menuItems = ko.observableArray([
    { name: "level1", subItems: [
        { name: "level1-1" },
        { name: "level1-2" }
    ] },
    { name: "level2" },
    { name: "level3", subItems: [
        { name: "level3-1" },
        { name: "level3-2", subItems: [
            { name: "level3-2-1" }
        ] },
    ] },
    { name: "level4" }
]);

这将呈现一个多级导航菜单。所以有些项可以有子项，有些则没有。水平的数量是未知的。

现在我有一个'过滤器导航'输入来过滤这些东西。

var self = this,
    menuFilter = ko.observable(""),
    filter = menuFilter().toLowerCase();

    if (filter === "") {
        return self.menuItems();
    } else {
        return ko.utils.arrayFilter(self.menuItems(), function (item) {
            if (item.name.toLowerCase().indexOf(filter) !== -1) {
                return true;
            }
        });
    }

这适用于顶级项目，但我不确定循环通过self.menuItems().subItems，然后是下一级，下一级等的最佳方式。

有什么想法吗？

编辑：我刚创建了这个JS小提琴，它似乎正在运作。现在我必须弄清楚如何让它在我的[稍微复杂]的应用程序上运行。

http://jsfiddle.net/KSrzL/7/

编辑（再次）：我的最新一期是顶层没有任何信息，所以我必须使用.children开始，但这不起作用。

http://jsfiddle.net/KSrzL/8/

Answer 1

这似乎有效：http://jsfiddle.net/MRtRm/

关键部分：

self.nonNullItems = function(arr) {
    return arr.filter(function(x) { return x !== null; });
};

self.filteredObjectOrNull = function(obj, query) {
    if (obj.hasOwnProperty('children')) {
        var filteredChildren = self.nonNullItems(obj.children.filter( function(x) { return self.filteredObjectOrNull(x, query); }));
        if (filteredChildren.length > 0)
            return {name: obj.name, children: filteredChildren};
    }

    if (self.matchText(obj.name, query))
            return obj;

    return null;
};

self.filterItems = function() {
    var filter = self.itemFilter();

    if (filter === "") {
        return self.items();
    } else {
        return self.nonNullItems(self.items().map( function(x) { return self.filteredObjectOrNull(x, filter); }));
    }
}

我认为它可以通过几种方式进行简化，但它似乎通过了我所做的测试。（您应该添加几个级别的菜单以确保。）

使用ko.utils.arrayFilter（）过滤多维Knockout observableArray

1 个答案: