带淘汰赛的过滤列表答案

【问题标题】：Filtering list with knockout带淘汰赛的过滤列表
【发布时间】：2017-12-10 17:12:47
【问题描述】：

我知道关于这个主题有很多类似的问题，但我一直在尝试自己解决这个问题，但我无法做到，已经一个星期了。

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

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 周）。

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

能否请您告诉我在哪里可以找到有关如何解决此问题的信息，或者您能否提供任何意见。

谢谢

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

您的代码存在一些问题。

with 绑定创建一个新的binding context。这意味着，剔除将在 currentPlace 对象内查找 placeList 属性，因为您已将其嵌套在 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 的数组：

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());

<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>

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

【讨论】：

阿迪加你是男人！能否请您给我推荐一个关于淘汰赛的好教程？
@AlbertoRocha 我不知道任何视频教程，但您可以在 youtube 上搜索。 Knockout 的documentation 非常简单易懂。在左侧，您可以看到绑定列表。你可以一一浏览它们。如果您对某些事情不清楚，也可以搜索 jsfiddle/Stack overflow 以获取示例。例如，在 google 上搜索 knockout foreach binding site:jsfiddle.net 将导致数百个问题（如果您将站点替换为 stackoverflow.com，则相同）。
@AlbertoRocha knockmeout.net 是一个非常适合简单和高级主题的博客。 Here's a useful list of fiddles 来自博客