按照我之前的问题 Item selection MVC view with KnockoutJS 提供的帮助,我能够实现我当时所追求的目标。众所周知,新的要求将会更快到来,而这就是。我需要显示一个组合框,该组合框应该过滤(更改)可用项目总数的列表。我在示例 Selection List 中引用并尝试了很多示例。
我的简单观点:
<h3>Filter Available Items By Name: </h3>
<p>Type letters: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /></p>
<div id='contactsList'>
<span data-bind="visible: availableItems().length > 0">Available countries: </span>
<ul data-bind="foreach: filteredItems, visible: availableItems().length > 0">
<li>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems" />
<span data-bind="text: title"></span>
</li>
</ul>
<span data-bind="visible: selectedItems().length > 0">Selected countries: </span>
<ul data-bind="foreach: selectedItems, visible: selectedItems().length > 0">
<li>
<span data-bind="text: title"></span>
<a href="#" data-bind="click: $parent.removeItem">Delete</a>
</li>
</ul>
</div>
View 模型:
var initialData = [
{
availableItems: [
{ title: "US", isSelected: true },
{ title: "Canada", isSelected: false },
{ title: "India", isSelected: false }]
},
{
selectedItems: [
{ "title": "US" },
{ "title": "Canada" }
]
}
];
function Item(titleText, isSelected) {
this.title = ko.observable(titleText);
this.isSelected = ko.observable(isSelected);
}
var SelectableItemViewModel = function (items) {
// Data
var self = this;
self.filter = ko.observable("");
self.availableItems = ko.observableArray(ko.utils.arrayMap(items[0].availableItems, function (item) {
return new Item(item.title, item.isSelected);
}));
self.selectedItems = ko.observableArray(ko.utils.arrayMap(items[1].selectedItems, function (item) {
return ko.utils.arrayFirst(self.availableItems(), function (itm){
return item.title == itm.title();
});
}));
//filter the items using the filter text
self.filteredItems = ko.dependentObservable(function () {
debugger;
var filter = this.filter().toLowerCase();
if (!filter) {
return this.availableItems();
} else {
return ko.utils.arrayFilter(this.availableItems(), function (item) {
return ko.utils.stringStartsWith(item.title().toLowerCase(), filter);
});
}
}, self);
// Operations
self.removeItem = function (removedItem) {
self.selectedItems.remove(removedItem);
};
}
var vm = new SelectableItemViewModel(initialData);
$(document).ready(function () {
ko.applyBindings(vm);
});
为了简单起见,我只是试图通过在文本框中击键来实现它(我希望一旦实现,组合框项目选择更改将顺利进行)。
问题是,无论如何,使用filteredItems显示的列表都不会刷新。我什至尝试了上一个问题 Item selection MVC view with KnockoutJS 中显示的其他方式,在更新部分。
我怀疑这是由于 availableItems 和 selectedItems 连接在一起的方式造成的,但我不确定出了什么问题。
我在文本框击键中看到,viewmodel FilteredItems 正在被调用(尽管注意到我的 jsfiddle 中的 chrome 出现错误,这可能是问题所在,相同的功能在其他 jsfiddle 中也有效)。我确实完全匹配了库,但没有帮助避免这些错误。
请帮我解决这个问题。
最佳答案
在您的 JsFiddle 中,问题是 ko.utils.stringStartsWith
不可用。这是 knockout 的内部函数,当您使用缩小版本时,它会被删除。
最好的解决方案是编写自己的 startsWith
函数,或者使用 google 查找一个函数,或者如果您正在使用另一个库,则从另一个库获取一个函数。
关于c# - 使用knockoutjs过滤有界项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23820721/