knockout.js - Knockout.js 点击绑定参数

Question

我有这个小 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; 
            });
        });
    };
}

findByLanguage 方法按语言过滤数组。在视图中，我尝试像这样实现：

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

我试图通过从那里调用语言参数来重用该函数。但是，如果我在 data-bind 上传递一个带括号的函数，它会自动被调用。

我怎样才能做到这一点？

Answer 1

完成此操作的最简单方法是将其包装在仅在单击时执行的函数中，例如：

<li><a tabindex="-1" href="#" data-bind="click: function () {findByLanguage('C')}">

或者，您可以使用绑定上下文来解决问题。

<li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind('C')">

这是使用 JS Fiddle (http://jsfiddle.net/uFyaP/1/) 的点击绑定示例

Answer 2

您可能对在视图模型中添加额外字段的稍微不同的方法感兴趣。

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

通过添加languages到视图模型中，您可以使用 Knockout 来呈现菜单，并且click绑定将自动将单击的语言传递给处理函数。此外，添加selectedLanguage为 observable 允许books在您选择或清除语言时更改计算值。

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());

​</p>

Answer 3

我知道这个问题很老，但如果有人感兴趣，根据文档，第一个参数应该是 viewModel，然后它按预期工作。

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