0

私は検索フォームを持っています：

<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私のViewModelのメソッド：

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

私は何が欠けていますか？

4

1 に答える 1

0

関数は、計算されたオブザーバブルを別のオブザーバブル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());
};

デモ

于 2012-11-04T21:42:39.237 に答える