javascript - Knockout.JS:当我尝试搜索某些内容时，我的控制台显示“未定义的 "Uncaught TypeError: Cannot read property ' toLowerCase”

Question

我想使用knockout JS 创建一个搜索和下拉过滤器。我的下拉过滤器工作正常，但是当我尝试搜索位置时，我的控制台给出了以下错误:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

ko.utils.stringStartsWith = function(string, startsWith) {
  string = string || " ";
  if (startsWith.length > string.length) return false;
  return string.substring(0, startsWith.length) == startsWith;
};

var Record = function(dropType, dropName, dropAddress, homeTown) {

  this.dropType = dropType;
  this.dropName = dropName;
  this.dropAddress = dropAddress;
  this.homeTown = homeTown;

};

var ViewModel = function(records, homeTowns) {
  var self = this;
  self.homeTowns = ko.observableArray(homeTowns);
  self.records = ko.observableArray(
    ko.utils.arrayMap(records, function(r) {
      return new Record(r.dropType, r.dropName, r.dropAddress, r.homeTown);
    }));



  // search filter
  self.dropTypeSearch = ko.observable('');
  self.dropNameSearch = ko.observable('');
  self.townSearch = ko.observable('');

  self.filteredRecords = ko.computed(function() {
    return ko.utils.arrayFilter(self.records(), function(x) {
      return (self.dropNameSearch().length == 0 || ko.utils.stringStartsWith(x.dropName.toLowerCase(), self.dropNameSearch().toLowerCase())) && (self.townSearch().length == 0 || x.homeTown == self.townSearch())
    });
  });
};



var homeTowns = ["Search Location", "Kalk Bay", "Simon's Town", "Muizenberg", "Claremont"];



var data = [{}, {
  id: 1,
  dropType: "Shelter",
  dropName: "The Haven, Kalk Bay",
  dropAddress: "139 Main Road, Kalk Bay",
  homeTown: "Kalk Bay",
}, {
  id: 2,
  dropType: "Shelter",
  dropName: "Happy Valley Simon's Town",
  dropAddress: "Palace Hill Road, Simon's Town",
  homeTown: "Simon's Town",
}, {
  id: 3,
  dropType: "Meals",
  dropName: "Living Grace Community Centre",
  dropAddress: "171 Main Road, Muizenberg",
  homeTown: "Muizenberg",
}, {
  id: 4,
  dropType: "Shelter",
  dropName: "The Haven, Claremont",
  dropAddress: "PO Box 23999, Claremont, 5 Fir Street",
  homeTown: "Claremont",
}, ];



ko.applyBindings(new ViewModel(data, homeTowns));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

//search input Name: <input data-bind="value: dropNameSearch, valueUpdate: 'afterkeyup'" /> Location: <select data-bind="options: homeTowns, value: townSearch"></select> //drop-down filter
<div data-bind="foreach: filteredRecords" class="record">
  <ul>
    <li>
      Type: <span data-bind="text: dropType"></span>
    </li>
    <li>
      Name: <span data-bind="text: dropName"></span>
    </li>
    <li>
      Address: <span data-bind="text: dropAddress"> </span>
    </li>
    <li>
      Location: <span data-bind="text: homeTown"></span>
    </li>

  </ul>

</div>

我是 Knockout.js 的新手。 JS fiddle 或代码片段运行将不胜感激。

Answer 1

因为该函数是窗口对象的一部分，而不是输入元素对象。因此，计算函数，您正在调用属于窗口对象一部分的函数。 this 对象将引用窗口。使用 call 或 apply，您可以将 this 的引用更改为另一个对象。在本例中，是您的输入字段。当你有机会时，研究“打电话”和“申请”。它将帮助您更好地理解它。