将过滤器应用于observableArray

Applying filter to a observableArray?

本文关键字：observableArray 应用于 过滤器      更新时间：2023-09-26

我正在做一个项目，在这个项目中，我有一个搜索字段，可以根据搜索框中键入的内容过滤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函数有问题。有什么建议吗？

也许您不应该在filter函数中设置原始的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());
        }
    };
相关文章：