Фильтрация многомерный Нокаут observableArray с ko.utils.arrayFilter()

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" } 
]); 

Это визуализирует меню навигации многоуровневый. Таким образом, некоторые элементы могут иметь subItems, другие - нет. И количество уровней неизвестно.

Теперь у меня есть вход для фильтрации, чтобы фильтровать эти вещи.

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); })); 
    } 
} 

Я думаю, что это может быть упрощена несколькими способами, но это, кажется, проходит тестирование я сделал , (Вы должны добавить еще несколько уровней меню, чтобы убедиться.)