Question

I have this little ViewModel:

function BooksViewModel() {
    var self = this;
    self.books = ko.observableArray(library);

    self.findByLanguage = function(lang) {
        self.books = ko.computed(function() {
            return ko.utils.arrayFilter(library, function(book) { 
                return book.language() === lang; 
            });
        });
    };
}

The findByLanguage method filters the array by language. In the view, im tryign to implement that like this:

<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('C')">C</a></li>
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('Cpp')">C++</a></li>
</ul>

I’m attemping to reuse the function by calling the language parameter from there. But if I pass a function with parenthesis on data-bind it automatically gets called.

How can I accomplish this?

Answer 1

You might be interested in a slightly different approach that add extra fields into your View Model.

http://jsfiddle.net/jearles/RN9Dw/

By adding languages into the View Model you can use Knockout to render the menu and the click binding will automatically pass the language that was clicked to the handler function. Additionally, adding selectedLanguage as an observable allows the books computed to change when you select or clear a language.

HTML

<ul class="dropdown-menu" data-bind="foreach: languages">
    <li><a tabindex="-1" href="#" data-bind="text: $data, click: $root.filterByLanguage"></a></li>
</ul>
<button data-bind="click: showAll">Show All</button>

<div data-bind="foreach: books">
    <p><span data-bind="text: name"></span>, <span data-bind="text: language"></span></p>
</div>​

JS

function BooksViewModel() {
    var self = this;

    self.languages = ko.observableArray(['C', 'C++']);
    self.selectedLanguage = ko.observable();
    self.library = [{name: 'Book A', language: 'C'}, {name: 'Book B', language: 'C++'}]; 
    self.books = ko.computed(function() {
        return ko.utils.arrayFilter(self.library, function(book) { 
          return self.selectedLanguage() == null ||
              book.language === self.selectedLanguage(); 
          })
    });

    self.showAll = function() {
        self.selectedLanguage(null);
    }
    self.filterByLanguage = function(lang) {
        self.selectedLanguage(lang);
    };
}

ko.applyBindings(new BooksViewModel());

​