Knockout.js单击参数绑定
我有一个小模型:Knockout.js单击参数绑定,knockout.js,Knockout.js,我有一个小模型: function BooksViewModel() { var self = this; self.books = ko.observableArray(library); self.findByLanguage = function(lang) { self.books = ko.computed(function() { return ko.utils.arrayFilter(library, functio
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>
我试图通过从那里调用language参数来重用该函数。但如果我在数据绑定上传递一个带括号的函数,它会自动被调用
如何实现这一点?实现这一点的最简单方法是将其封装在只在单击时执行的函数中,如:
<li><a tabindex="-1" href="#" data-bind="click: function () {findByLanguage('C')}">
您可能会对在视图模型中添加额外字段的稍微不同的方法感兴趣
通过在视图模型中添加语言
,您可以使用Knockout来呈现菜单,单击
绑定将自动将单击的语言传递给处理程序函数。此外,将selectedLanguage
添加为可观察对象,可以在选择或清除语言时更改books
计算结果
HTML
我知道这个问题由来已久,但如果有人感兴趣,根据,第一个参数应该是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>
它没有被称为MyFriends,我已经附加了一个JS Fiddle(),它看起来确实有效,但我一开始发现它不起作用,因为我离开了self.books=ko.observearray(图书馆)代码>中没有定义库。这正是我在另一个上下文中需要的。它小巧,可读性强,优雅。顺便说一句:它在提交绑定上的工作方式相同。关于.JSFiddle示例的更多信息没有.bind场景。看看这个很好。。。这不仅适用于knockout,也适用于许多其他插件,以避免函数在定义时被调用。在我的余生中,我将赞扬这个解决方案。我们的解决方案将在单击之前调用findByLanguage。你要么使用函数,要么使用bind。这个答案是正确的。绑定不会导致调用函数Ravi,添加$data参数是唯一可以让参数对齐的方法。@JimWindram,我在Ravi的评论后更新了答案。我忽略了原始答案中的.bind
调用。
<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>
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());
<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>