搜索形式Knockout.js

处理我有一个搜索表单：搜索形式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>

我在这里列出的书：

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

而一个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')); 
      }); 
     }); 
    };  
}

我错过了什么？

来源

2012-11-04 jviotti

你到底想达到什么目的？ –

它应该通过名称来过滤self.books数组，并在表单上编写文本 – jviotti

您是否可以删除那些与您要求的问题无关的函数，并包含HTML的（简化）片段你绑定书籍元素？ – BobS

您的findBook函数正试图用不同的值替代books计算的可观察值。你的观点已经被绑定到前一个，所以你不会在那里看到任何改变。

您需要将您的books计算可观察值更改为取决于某个过滤器。如果过滤器未设置，请包含该项目。如果过滤器已设置，请将其排除。

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

来源

2012-11-04 21:42:39

搜索形式Knockout.js

回答

相关问题