使用Knockout.js处理搜索表单

我有一个搜索表：

<form class="navbar-search pull-right" data-bind="submit: findBook">
    <input type="text" class="search-query" placeholder="Search" id="search-input"> 
    <i class="icon-search"></i>
    <input type="submit" value="Submit">
</form>

---

我遗漏了什么？

您的

findBook

函数正在尝试将

书籍

computed observable替换为另一本。您的视图已绑定到上一个视图，因此您不会在那里看到任何更改

您需要更改

书籍

计算的可观测值，以依赖于某些过滤器。如果未设置筛选器，请包括该项。如果设置了过滤器，则将其排除

self.selectedCategory = ko.observable('');
self.nameFilter = ko.observable('');

self.books = ko.computed(function () {
    var selectedCategory = self.selectedCategory(),
        nameFilter = self.nameFilter(),
        selectedFilter = filter && new RegExp(filter, 'i');
    return ko.utils.arrayFilter(library, function (book) {
        var validCategory = !selectedCategory || book.category === selectedCategory,
            validFilter = !selectedFilter || book.name.match(selectedFilter);
        return validCategory && validFilter;
    });
});

self.searchInput = ko.observable();
self.findBook = function (element) {
    self.nameFilter(self.searchInput());
};

---

您想实现什么？它应该使用您在表单上写的文本按名称过滤self.books数组。您可以删掉那些与您要问的问题无关的函数，并在绑定books元素的地方包含一个（简化的）HTML片段吗？

    self.books = ko.computed(function() {
        return ko.utils.arrayFilter(library, function(book) { 
          return self.selectedCategory() == null ||
              book.category === self.selectedCategory(); 
          })
    });
    self.findBook = function() {
        self.books = ko.computed(function() {
            return ko.utils.arrayFilter(library, function(book) {
                return book.name.match(new RegExp($('#search-input').val(), 'i'));   
            });
        });
    };       
}

self.selectedCategory = ko.observable('');
self.nameFilter = ko.observable('');

self.books = ko.computed(function () {
    var selectedCategory = self.selectedCategory(),
        nameFilter = self.nameFilter(),
        selectedFilter = filter && new RegExp(filter, 'i');
    return ko.utils.arrayFilter(library, function (book) {
        var validCategory = !selectedCategory || book.category === selectedCategory,
            validFilter = !selectedFilter || book.name.match(selectedFilter);
        return validCategory && validFilter;
    });
});

self.searchInput = ko.observable();
self.findBook = function (element) {
    self.nameFilter(self.searchInput());
};