Question

我知道在这个问题上有很多类似的问题，但我一直试图通过自己解决这个问题而且我无法做到这一点，已经过了一周了。

我要做的只是用文本框过滤列表。代码如下：

HTML：

<!DOCTYPE html>
<html>
  <head>
      <title>Magic Towns</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="css/styles.css">
    <style>
      html,
      body {
        font-family: Arial, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>

<div id="map"></div>
<div class="menuContainer">
  <span class="center" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#"><h1>Locations:</h1></a>
    <form role="search">
                    <input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search...">
    </form>
    <div data-bind='with currentPlace' >
      <div data-bind='foreach: placeList'>
        <p href="#" class="whiteFont" data-bind='text: city, click: closeNav'></p>
      </div>
    </div>
  </div>
</div>

    <script src='js/sidebar.js'></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/knockout-3.4.2.js"></script>
    <script src="js/data.js"></script>
    <script src="js/app3.js"></script>


  </body>
</html>

的javascript：

var Place = function(data) {
    this.city = ko.observable(data.city);
    this.lat = ko.observable(data.lat);
    this.lng = ko.observable(data.lng);
};


var ViewModel = function() {
    var self = this;

    self.placeList = ko.observableArray([]);
    self.query = ko.observable(''),

    initialPlaces.forEach(function(placeLocation) {
      self.placeList.push( new Place(placeLocation));
    });
    self.currentPlace = ko.observable( this.placeList()[0]);

};



    ko.applyBindings(ViewModel);

数据：

var initialPlaces = [
  {"city":"R","lat":22,"lng":-102},
  {"city":"T","lat":23,"lng":-110},
  {"city":"P","lat":18,"lng":-92},
  {"city":"F","lat":25,"lng":-102},
];

我已经尝试过这个链接Link1 Link2和另外一些但没有了...我是Javascript和淘汰赛的淘汰赛（不超过2周）。

每次尝试任何示例时，我的列表都会显示空白，并且没有显示任何内容。

请您告诉我在哪里可以找到有关如何解决此问题的信息，或者请您帮助解决任何问题。

由于

Answer 1

您的代码存在一些问题。

with绑定会创建一个新的binding context。这意味着，knockout将在placeList对象中查找currentPlace属性，因为您已嵌套在with绑定中。
您的约束:后with遗失with currentPlace
您需要将对象传递给ko.applyBindings，而不是函数。您可以将对象文字创建为ViewModel。或者创建一个函数，然后使用new运算符创建一个对象。你正在使用后者。（Difference b/n object literal and using new operator on a constructor function）

我不确定currentPlace应该做什么，因为你想根据city过滤数组。您可以创建这样的computed属性filter基于query的数组：

＆＃13;

var initialPlaces = [{
  "city": "London",
  "lat": 22,
  "lng": -102
}, {
  "city": "New York",
  "lat": 23,
  "lng": -110
}, {
  "city": "New Delhi",
  "lat": 18,
  "lng": -92
}];

var Place = function(data) {
  this.city = ko.observable(data.city);
  this.lat = ko.observable(data.lat);
  this.lng = ko.observable(data.lng);
};

var ViewModel = function() {
  var self = this;

  self.placeList = ko.observableArray([]);
  self.query = ko.observable('');

  initialPlaces.forEach(function(placeLocation) {
    self.placeList.push(new Place(placeLocation));
  });

  // everytime query/placeList changes, this gets computed again
  self.filteredPlaces = ko.computed(function() {
    if (!self.query()) {
      return self.placeList();
    } else {
      return self.placeList()
        .filter(place => place.city().toLowerCase().indexOf(self.query().toLowerCase()) > -1);
    }
  });
};

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search...">

<div data-bind="foreach:filteredPlaces">
  <span data-bind="text:city"></span><br>
</div>

＆＃13;

点击Run code snippet进行测试。 Here's a fiddle如果你想玩它。

过滤列表与淘汰赛

1 个答案: