我是 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/
最佳答案
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;
});
});
关于javascript - knockout 搜索/过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29551997/