使用 Knockout.js 处理搜索表单答案

【问题标题】：Search form handling with Knockout.js使用 Knockout.js 处理搜索表单
【发布时间】：2012-11-05 05:42:39
【问题描述】：

我有一个搜索表单：

<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>

我在这里列出书籍：

<ul id="container" class="list" data-bind="foreach: books">
    <li>
    <div>
    <table>
    <tr>
    <td class="center">
    <a data-bind="attr:{href: url}">            
       <img width="150" class="img-polaroid shadow" data-bind="attr:{src: image}">
    </a>
    </td>
    </tr>   
    <tr>
    <td class="center">
        <h6 data-bind="text: name"></h6>
    </td>
    </tr>
    </table>
    </div>
    </li>
</ul>

我的 ViewModel 中还有一个 findBook 方法：

    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.books 数组
您能否删除那些与您提出的问题无关的功能，并在您绑定书籍元素的 HTML 中包含一个（简化的）sn-p？跨度>

标签： knockout.js

【解决方案1】：

您的 findBook 函数正在尝试用不同的替换 books 计算的 observable。您的视图已绑定到前一个视图，因此您不会在此处看到任何更改。

您需要更改 books 计算的 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());
};

Demo

【讨论】：