javascript - knockout 搜索/过滤器

Question

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

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

我在这里使用了在 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 构造函数中删除，它将从 map 中删除。

这是我的一些工作示例: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;
    });
});