我有这个小的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>
我要通过从那里调用语言参数来重复使用该函数。但是,如果我通过括号通过数据绑定的函数自动调用。
。我该如何完成?
完成此操作的最简单方法是将其包装在仅在单击时执行的函数,例如:
<li><a tabindex="-1" href="#" data-bind="click: function () {findByLanguage('C')}">
另外,您可以使用绑定上下文应执行技巧。
<li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind('C')">
以下是使用JS小提琴(http://jsfiddle.net/ufyap/1/)的单击绑定的示例
您可能对稍微不同的方法感兴趣,该方法将额外的字段添加到您的视图模型中。
http://jsfiddle.net/jearles/rn9dw/
通过将languages
添加到视图模型中,您可以使用敲除渲染菜单,并且click
绑定将自动将单击的语言传递给处理程序功能。此外,添加selectedLanguage
作为可观察的可观察允许在选择或清除语言时计算的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());
我知道这个问题是旧的,但是如果某人感兴趣的话,根据文档,第一个参数应该是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>