淘汰赛搜索/过滤器

Question

我是 Knockout JS 的新手，我正在努力完成这个项目。

我创建了一个地图网站，该网站在页面上显示了一系列关于城镇周围热门地点的图钉。这个想法是页面左侧的搜索栏将过滤掉地图上名称与搜索查询不匹配的图钉。页面左侧还有一个 "master" 列表，搜索栏也会从中过滤。

我在这里使用了在 jsfiddle 上找到的示例：http://jsfiddle.net/mythical/XJEzc/ 但是我在将相同的逻辑应用到我的代码时遇到了麻烦。

这里是：

HTML:

        <li>
            <input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
        </li>
        <ul data-bind="template: {name:'pin', foreach: pins}"></ul> 
    </ul>

<script type="text/html" id="pin">
    <li>
        <strong data-bind="text: name"></strong>
    </li>
</script>

JS:

self.pins = ko.observableArray([
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test1"),
  new self.mapPin("Anchorage Alaska", 61.190491, -149.868937, "test2")
]);

self.query = ko.observable('');

self.filterPins = ko.dependentObservable(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(name, function (pin) {
        return pin.toLowerCase().indexOf(search) >= 0;
    });
});

根据我设置的逻辑，如果名称从 pin 构造函数中删除，它将从地图中删除。

这是我的一些工作示例：http://jamesiv.es/projects/map/

Answer 1

HTML

<ul data-bind="template: {name:'pin', foreach: pins}"></ul>

改为

<ul data-bind="template: {name:'pin', foreach: filterPins}"></ul>

Javascript

self.filterPins = ko.dependentObservable(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(self.name, function (pin) {
        return pin.toLowerCase().indexOf(search) >= 0;
    });
});

改为

self.filterPins = ko.computed(function () {
    var search = this.query().toLowerCase();
    return ko.utils.arrayFilter(self.pins(), function (pin) {
        return pin.name().toLowerCase().indexOf(search) >= 0;
    });
});

Answer 2

如果使用高于 3.2 的 Knockout 版本，只想更新代码

从 value 和 valueUpdate 更改为 textInput，建议 here

HTML:

<input class="form-control" placeholder="Search…" type="search" name="filter" data-bind="textInput: query" autocomplete="off" />

JS:

this.query = ko.observable('');

this.filteredPins = ko.computed(function () {
    if (this.query()) {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(this.pins(), function (pin) {
            return pin.name().toLowerCase().indexOf(search) >= 0;
        });
    } else {
        return pins
    }}, this);

淘汰赛搜索/过滤器

Knockout Search / Filter

html

javascript

jquery

knockout.js