Question

我对Knockout JS非常陌生，而且我有一段时间试图让这个项目完成。

我创建了一个地图网站，该网站在页面上显示了一系列针对城镇周边热门地点的图钉。我们的想法是，页面左侧的搜索栏将过滤掉地图上的图钉，其名称与搜索查询不匹配。还有一个＆＃34;主人＆＃34;页面左侧的列表，搜索栏也会过滤。

我使用了我在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;
    });
});

如果从引脚构造函数中删除了名称，我会设置逻辑，它会将其从地图中删除。

这是我的一些有用的例子：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);

淘汰赛搜索/过滤器

2 个答案: