Knockout:过滤数组中的数组

时间:2013-01-16 17:28:07

标签: knockout.js knockout-2.0 knockout-mvc

我有一些命名项目,每个项目包含其他命名项目数组(某种树)。我需要在两个数组中按名称实现过滤。

所以我检查第一个数组中每个项目的名称:

  • 如果名称合适,我会显示entiry分支。
  • 如果名称不合适,我正在检查子数组:
    • 如果子数组不包含合适的命名项,我不会显示该分支。
    • 如果子数组包含合适的命名项,我只显示带有合适项的分支。

我已经以下一种方式实现了它:

ko.utils.stringStartsWith = function (string, startsWith) {
    if (startsWith.length > string.length)
        return false;

    return string.substring(0, startsWith.length) === startsWith;
};

$(function () {
    var vm = {
        search: ko.observable(''),
        items: ko.observableArray([])
    };

    //jsonData - my data
    $.each(jsonData, function (i, jItem) {
        var item = {
            name: jItem.Name,
            search: ko.observable(''),
            subItems: ko.observableArray([])
        };

        $.each(jItem.Items, function (j, jsubItem) {
            var subItem = {
                name: jsubItem.Name,
            };

            item.subItems.push(subItem);
        });

        item.filteredSubItems = ko.computed(function () {
                var self = this;

                return ko.utils.arrayFilter(this.subItems(), function (fsubItem) {
                    if (self.search().length == 0
                        || ko.utils.stringStartsWith(fsubItem.name.toLowerCase(), self.search().toLowerCase())) {
                        return true;
                    }

                    return false;
                });
            }, item);
        vm.items.push(item);
    });

    vm.filteredItems = ko.computed(function () {
        var self = this;

        return ko.utils.arrayFilter(this.items(), function (fitem) {
            if (self.search().length == 0
                || ko.utils.stringStartsWith(fitem.name.toLowerCase(), self.search().toLowerCase())) {
                fitem.search('');
                return true;
            }

            fitem.search(self.search());

            if (fitem.filteredSubItems().length != 0)
                return true;

            return false;
        });
    }, vm);

    ko.applyBindings(vm);
});

所以它运作良好,但filteredItems的计算看起来像是丑陋的解决方法。而且,我关心我的解决方案的表现。

有人知道更多的林间空地解决方案吗?

1 个答案:

答案 0 :(得分:1)

半年前我问了这个问题,我忘了说我在这个问题上找到了答案。好的和简单的解决方案是Knockout Mapping