3

次のような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 Fiddle を作成したところ、動作しているようです。今、[少し複雑な] アプリでそれを実行する方法を見つけなければなりません。

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

編集（再び）：私の最新の問題は、トップレベルに情報がないため、機能し.childrenないで開始する必要があることです。

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

4

1 に答える 1

2

これはうまくいくようです：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); }));
    }
}

いくつかの方法で単純化できると思いますが、私が行ったテストに合格したようです。(確実にするために、さらにいくつかのレベルのメニューを追加する必要があります。)

于 2013-05-30T21:40:20.953 に答える