javascript - 将 KnockoutJS 绑定(bind)到 Google map InfoWindow 内容

Question

在我使用 Google map 信息窗口显示位置详细信息的项目中，我遇到了 knockout 绑定(bind)问题。我已经通过 knockout InfoWindow 的 HTML 内容来绑定(bind)所选位置的数据，这在开始时似乎工作正常。

现在的问题是:一旦 InfoWindow 关闭(例如，通过按 x 按钮)，Google map 就会从 DOM 中完全删除 html 内容，并在 InfoWindow 关闭时再次添加它。再次显示(例如，当单击下一个标记时)。

这里的问题是，一旦元素从 DOM 中删除，绑定(bind)就会丢失，因此内容不再更新。

知道如何将绑定(bind)重新应用到这个确切的元素吗？再次调用 ko.applyBindings() 会导致异常“您无法将绑定(bind)多次应用于同一元素”。

这里是 InfoWindow 内容的 HTML 元素:

<div id="info-content" data-bind="if:selectedPlace">
  <div class="gm-iw gm-sm" data-bind="with:selectedPlace">
    <div class="gm-title" data-bind="text:name"></div>
    <div class="gm-basicinfo">
      <div class="gm-addr" data-bind="text:vicinity"></div>
      <div class="gm-website" data-bind="if:website"><a target="_blank" data-bind="attr: {href:website}, text:websiteText"></a></div>
      <div class="gm-phone" data-bind="text:formatted_phone_number"></div>
    </div>
    <div class="gm-rev" >
      <span data-bind="if:rating">
        <span class="gm-numeric-rev" data-bind="text:rating"></span>
        <div class="gm-stars-b">
          <div class="gm-stars-f" data-bind="style: { width: getStarWidth } "></div>
        </div>
      </span>
      <span data-bind="if:url"><a target="_blank" data-bind="attr: {href:url}">see more</a></span>
    </div>
  </div>

JS初始化函数和onClick函数:

// the initialize function gets called after ko.applyBindings(model)
ViewModel.prototype.initialize = function () {

    ... code to initialize map and search elements

    // instantiate an InfoWindow
    infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent(document.getElementById('info-content'));

    ... 

}

// gets called for each place returned by the search, 
// koPlace is the knockout observable for a place returned by the search, 
// i is the index of the search result
function addMarker(koPlace, i) {

    // create a marker
    var m = new google.maps.Marker({
      title: koPlace.name(),
      position: koPlace.jsPlace.geometry.location,
      animation: google.maps.Animation.DROP,
    });
    m.koPlace = koPlace;
    koPlace.marker = m;
    markers[i] = m;

    google.maps.event.addListener(m, 'click', markerClicked);
    setTimeout(dropMarker(i), i * 100);
}

function markerClicked() {
    var koPlace = this.koPlace; // this refers to the marker object

    if (koPlace) { // just checking
        koPlace.selected(true); // this is used for highlighting.
        model.selectedPlace(koPlace); // this should set the binding.
        infoWindow.open(map, this);
    }
}

Answer 1

我想我应该为我已经使用过的这个问题添加另一个解决方案。

您可以设置内容字符串(如 Nurik 所述)并让它保留您的绑定(bind)，但有几个额外的步骤。然后，您需要使用 jQuery 将字符串转换为 DOM 节点并重新应用 knockout 绑定(bind):

function makeContent() {
    var html = '<div id="info-window-container" style="display:none;">' +
                    '<div id="info-content" data-bind="if:selectedPlace">' +
                    '...' +
                    '</div>' +
               '</div>';
    html = $parseHTML(html)[0];
    return html;
)}

function addMarker() {
    var infoWindow = new google.maps.InfoWindow();
    var m = new google.maps.Marker({
      title: koPlace.name(),
      ...
      content: makeContent()
    });
    m.koPlace = koPlace;
    koPlace.marker = m;
    markers[i] = m;

    google.maps.event.addListener(m, 'click', function() {
        infoWindow.setContent(this.content);
        infoWindow.open(map,this);
    )};

    ko.applyBindings(YourViewModel, m.content);
)}