使用 knockoutjs 过滤有界项

Question

根据我之前的问题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>

视图模型：

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 中有效）。我确实完全匹配了这些库，但没有帮助避免这些错误。

请帮我解决这个问题。

Answer 1

在您的 JsFiddle 中，问题是 ko.utils.stringStartsWith 不可用。这是一个用于敲除的内部函数，当您使用缩小版时会被删除。

最好的解决方案是编写自己的startsWith 函数，或者使用google 找到一个，或者如果您正在使用，请从另一个库中获取一个。