当 Google Maps API v3 信息窗口关闭时，Knockout 失去绑定

Question

我正在将数据绑定到一个 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 或在信息窗口关闭时清除并重新绑定。

Answer 1

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

即：

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

而不是：

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

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

如果您尝试将淘汰赛绑定放在 Google 地图信息窗口中，那么您将度过一段糟糕的时光。

Answer 2

我能够在调用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);
});