knockoutjs Google Maps API显示所有标记

Question

使用硬编码的标记位置数组构建Google地图页面。有一个搜索框可以使用挖空过滤屏幕上的可见标记。我们的想法是，当您在搜索框中输入每个字母时，挖空过滤您在屏幕上看到的标记。这一切都很好，但如果我在搜索框中输入几个字母然后清除它，所有标记都不会重新出现在屏幕上。我知道它应该是一个简单的条件，但对于我的生活，我不能让它工作。 这是相关的代码：

[0, 0, 0]
[0, 0, 1]
[0, 0, 2]
[0, 1, 0]
[0, 1, 1]
[0, 1, 2]
[0, 2, 0]
[0, 2, 1]
[0, 2, 2]
[1, 0, 0]
[1, 0, 1]
[1, 0, 2]
[1, 1, 0]
[1, 1, 1]
[1, 1, 2]
[1, 2, 0]
[1, 2, 1]
[1, 2, 2]
[2, 0, 0]
[2, 0, 1]
[2, 0, 2]
[2, 1, 0]
[2, 1, 1]
[2, 1, 2]
[2, 2, 0]
[2, 2, 1]
[2, 2, 2]

Answer 1

我不确定但是看起来你的if语句可能存在问题，因为（查询（＆＃39;＆＃39;））语句将始终为false。您正在设置变量＆＃34; query＆＃34;作为一个空的observable，然后使用语法将值放入一个observable，据我所知。我猜你想要显示所有标记，如果你的搜索输入是空的。我想你会想要使用你当前的变量来测量输入是否为空以显示全部。 if语句的第一部分也缺少setMarkerVisibility（）调用。

//knockout viewmodel - handles search locations array and filtering
function AppViewModel() {
    query = ko.observable('');
    this.locations = ko.computed(function () {
        var self = this;
        var search = self.query().toLowerCase();
        return ko.utils.arrayFilter(locations, function (loc) {
            //Show all location markers if they contain the search text or if the search text is empty
            if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') {
                loc.showLoc(true);
                loc.visible = true;
            } else {
                loc.showLoc(false);
                loc.visible = false;
            }
            setMarkerVisibility();
        });
    });
}

Answer 2

所以答案就是：ko.computed函数在 createMarkers（）之前的脚本中执行，所以我需要添加一个循环遍历数组的IF并验证标记已经创建

function AppViewModel() {
    query = ko.observable('');
    this.locations = ko.computed(function () {
        var self = this;
        var search = self.query().toLowerCase();

        if (!search) {
            for (i = 0; i < locations.length; i++) {
                if (locations[i].marker) //checks to see that markers exist
        locations[i].marker.setVisible(true);
            }
        }

        return ko.utils.arrayFilter(locations, function (loc) {               
            if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') {
                loc.showLoc(true);
                loc.visible = true;
            } else {
                loc.showLoc(false);
                loc.visible = false;
            }
            setMarkerVisibility();
        });
    });
}