javascript - 将过滤器应用于 observableArray？

Question

我正在开发一个项目，其中有一个搜索字段，可以根据搜索框中输入的内容过滤 observableArray。

这是我的 html 代码:

                <input class="form-control" placeholder="Search for a burger joint around downtown Indianapolis, IN" data-bind="value: searchInput, valueUpdate: 'afterkeydown', event: { keyup: filterResults }">

这是我的js代码:

var BurgerJoint = function(data) {
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
    this.long = ko.observable(data.long);
    this.lat = ko.observable(data.lat);
    this.comments = ko.observable(data.comments);
}

var ViewModel = function() {
    var self = this;
    self.searchInput = ko.observable('');

    this.burgerList = ko.observableArray([]);

    initialBurgerJoints.forEach(function(burgerItem){
        self.burgerList.push( new BurgerJoint(burgerItem) );        
        addmarker(burgerItem.lat, burgerItem.long, burgerItem.id, burgerItem.name, burgerItem.comments);
    });

    self.burgerList.sort(function (l, r) { return l.name() > r.name() ? 1 : -1 });

    self.currentFilter = ko.observable();

    self.filterResults = function(){
        var value = self.searchInput().toLowerCase();
        if(value != ''){
            self.burgerList(self.burgerList.filter(function(data){
                var startsWith = data.name.toLowerCase().startsWith(value);
                return burgerList;
            }));
        }
        return true;
    };

    self.showmap = function(data) {
        viewmarker(data.id());
    };      
}

    ko.applyBindings(new ViewModel());

我在使用 filterResults 函数时遇到问题。有什么建议吗？

Answer 1

也许您不应该在过滤器函数中设置原始的 burgerList 。首先制作原件的副本/克隆。尝试类似的东西

    self.filterResults = function(){
        var value = self.searchInput().toLowerCase();
        if(value != ''){
            self.burgerList(self.burgerList().filter(function(data){
                return data.name.toLowerCase().startsWith(value);
            }));
        }else{
          // reset with the original burgerList contents here
          self.burgerList(self.burgerListClone());
        }
    };