我的 Knockout 数据绑定产生未定义的控制台错误

Question

我正在使用 Knockout 过滤两个下拉菜单，我不知道为什么我会看到这个控制台错误。

Uncaught TypeError: Unable to process binding "value: function(){return $root.filter }" Message: Cannot read property 'length' of undefined

问题与return值有关，它正确地过滤了数据；但是，控制台错误不断出现，我尝试更改以下内容：

将 $root 更改为 $data
将 filter.Value 更改为 filter.ID()
删除括号，只是 return输入 ID，到目前为止没有任何效果？

JS/Knockout:

    var self = this;
    self.filters = ko.observableArray(self.Model.Teams());
    self.filter = ko.observable('');
    self.items = ko.observableArray(self.Model.Users());
    self.filteredItems = ko.computed(function () {
        var filter = self.filter();
        if (!filter || filter == "All") {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function (i) {
                return i.ID() == filter.Value();
            });
        }
    });

这个 select 下拉菜单：

<div>
        <select class="filter-dropdown-small" data-bind="options: $root.filters, value: $root.filter, optionsText: 'Text', optionsCaption: 'All'"></select>
</div>

过滤这个：

<div>
       ```<select class="filter-dropdown-small" data-bind="options: $root.filteredItems, optionsText: 'Text', optionsCaption: 'All'"></select>```
</div>

没有控制台错误的要过滤的数据。

Answer 1

因为 $root.filter 被用于另一个部分注入到这个 HTML，这是一个冲突导致控制台错误，重命名 JS 的过滤器部分，因此数据绑定在第一个一块 html，这解决了控制台错误，因此解决了问题。

我的 Knockout 数据绑定产生未定义的控制台错误

My Knockout Data Bind is Producing an Undefined Console Error

javascript

knockout.js