1

我将数据绑定到一个 div，然后将其设置为 InfoWindow 的内容。单击地图上的标记时，我正在更改绑定的 observable，这会更新信息窗口中的内容。在关闭信息窗口之前，所有这些都可以正常工作。谷歌地图从 DOM 中删除了信息窗口，以及我的绑定了它的 div。重新打开信息窗口会导致其内容被冻结在关闭时的状态。

对 observable 的任何更改都不再更新 ui，包括使用 valueHasMutated。我试过只是重置信息窗口的内容并重新绑定，但 JQuery 元素仍然存在并且我得到了重复的内容。我也尝试过使用 cleanNode 和重新绑定，但也得到了重复的内容。

我也绑定的div：

<div id="placeTmpl" data-bind="with: place">
        <h3>
            <a data-bind="text: name, attr: { 'href': detailsUrl($data) }"></a>
        </h3>
</div>

谷歌地图信息窗口：

window.infoWindow = new window.google.maps.InfoWindow({
    content: ''
});
window.infoWindow.setContent($('#placeTmpl')[0]);

事件监听器和更新 observable

window.google.maps.event.addListener(marker, "click", function() {
    window.viewModel.openInfoWindow(marker, data);
});

self.openInfoWindow = function (marker, data) {
   for (var i = 0; i < self.places().length; i++) {
        if (self.places()[i].placeId == data.PlaceId) {
            self.place(self.places()[i]);
        }
    }
    window.infoWindow.open(map, marker);
};

就像我说的，这一切都很好，直到信息窗口关闭。我只是在寻找一种方法来强制淘汰赛再次开始更新 ui 或在信息窗口关闭时清除并重新绑定。

4

2 回答 2

3

我可以通过将 InfoWindow 内容设置为 html 字符串而不是 DOM 节点来解决这个问题。

IE：

window.infoWindow.setContent($('#placeTmpl').html());

而不是：

window.infoWindow.setContent($('#placeTmpl')[0]);

通过这样做，带有敲除绑定的 html 保持在原位，而不是被转移到随后在关闭时被销毁的信息窗口中。Knockout 现在像往常一样更新有界 DOM 元素，我只是在每次点击时使用 html 字符串更新信息窗口。

如果您尝试将淘汰赛绑定放在 Google Maps InfoWindow 中，那么您将度过一段糟糕的时光。

于 2013-03-10T01:59:13.200 回答
1

我能够解决这个问题，而不必在调用时使用字符串setContent。在我的例子中，信息窗口具有在信息窗口打开时会更新的动态元素，因此字符串解决方案不会考虑到这一点。

我添加了一个closeclick处理程序，在该处理程序中我跟踪传递给信息窗口的原始 DOM 元素，并在信息窗口取出后将元素添加回正文。这使淘汰赛感到高兴，并且信息窗口不在乎。

var $node = $('#placeTmpl');

var infoWindow = new google.maps.InfoWindow({
    content: $node[0]
});

google.maps.event.addListener(infoWindow, "closeclick", function () {
    //google maps will destroy this node and knockout will stop updating it
    //add it back to the body so knockout will take care of it
    $("body").append($node);
});
于 2014-08-12T22:08:30.773 回答