我从this post和this fiddle大量借用,但无法根据用户输入过滤我的表格。我试图允许用户按描述名称过滤列表。看起来过滤“函数”从未被调用,但我不确定为什么。
我在使用和不使用映射插件的情况下尝试了这个,并且我尝试在标签上使用模板(而不仅仅是tbody标签上的foreach),以防需要模板。每次我都可以让Knockout将我的所有viewModel的值绑定到HTML表,但是在过滤器文本框中输入什么都不做。
Please see this fiddle for the complete code,欢迎提出任何建议。感谢
<input data-bind="value: filter, valueUpdate: 'afterkeydown'" />
var jsonData = '[{"supplier":"HD Supply","itemNumber":"117983","description":"PAPER
TOWEL DISPENSER","quantity":"1","price":"65.79"},
{"supplier":"Fun Express","itemNumber":"62_9115","description":"Learning
Charts","quantity":"1","price":"5.80"},
{"supplier":"Royal Coffee","itemNumber":"4303","description":"Caffe Siena Coffee Clutch
1300/cs","quantity":"1","price":"67.14"}]';
var viewModel = {
cartItemsList : ko.mapping.fromJSON(jsonData),
filter : ko.observable("")
};
viewModel.filteredItems = ko.dependentObservable(function () {
var filter = this.filter().toLowerCase();
if (!filter) {
return this.cartItemsList();
} else {
return ko.utils.arrayFilter(this.cartItemsList(), function (cartItemsList) {
return (cartItemsList.description().toLowerCase().indexOf(filter) > -1);
});
}
}, viewModel);
ko.applyBindings(viewModel, document.getElementById("tblShoppingCart"));