1

情報ウィンドウのコンテンツとして設定しているdivにデータバインディングしています。マップ上のマーカーがクリックされると、バインドされたオブザーバブルが変更され、情報ウィンドウのコンテンツが更新されます。情報ウィンドウが閉じるまで、これはすべて正常に機能します。Googleマップは、バインディングが含まれているdivとともに、情報ウィンドウをDOMから削除します。情報ウィンドウを再度開くと、コンテンツが閉じたときの状態でフリーズします。

valueHasMutatedの使用を含め、オブザーバブルへの変更はUIを更新しなくなりました。情報ウィンドウのコンテンツをリセットして再バインドしようとしましたが、JQuery要素がまだ存在し、コンテンツが重複しています。また、cleanNodeと再バインドを使用してみましたが、それで重複コンテンツも取得しました。

私もバインドしているdiv：

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

Googleマップインフォウィンドウ：

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

イベントリスナーと更新オブザーバブル

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

インフォウィンドウのコンテンツをDOMノードではなくhtml文字列として設定することで、これを回避することができました。

すなわち：

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

それよりも：

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

これを行うことにより、ノックアウトバインディングを使用したhtmlは、情報ウィンドウに転送されて閉じたときに破棄されるのではなく、そのまま残ります。Knockoutは、通常どおり境界のあるDOM要素を更新するようになり、クリックするたびにhtml文字列で情報ウィンドウを更新するだけです。

グーグルマップのインフォウィンドウにノックアウトバインディングを入れようとすると、ひどい時間を過ごすことになります。

于 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 に答える