製作數據綁定：點擊工作就像一個marker.addListener（）

Question

我做了一個應用程序，它使用knockoutjs從一個observableArray加載谷歌地圖和多個標記。每個標記也有相應的<li>元素也從我的observableArray中提取。每個標記都有一個marker.addListener('click', function)，它會拉起一個infowindow，最終會從外部api中拉出一些關於該位置的信息。我的問題是連接<li>元素與其相應的標記。我想在<li>元素上使用data-bind='click:'，結果與點擊標記相同。

http://codepen.io/ntibbs/pen/ZbPPBm

我試着做一些像

 this.marker.addListener('click', myFunction); 

     this.zoom = function(){ 
     myFunction; 
     }.bind(this); 

     function myFunction() { 
     if (infowindow) { 
      infowindow.close(); 
     }; 
     contentString = '<div">'+ 
      this.title + '</div>'; 
     infowindow = new google.maps.InfoWindow({ 
      content: contentString, 
      pixelOffset: new google.maps.Size(50, 0), 
     }); 
     map.setZoom(9); 
     map.setCenter(this.getPosition()); 
     infowindow.open(map, this); 
     google.maps.event.addListener(infowindow, 'closeclick', function() { 
      map.setZoom(7); 
      map.setCenter(mapOptions.center); 
     }); 
     }; 

但正如我曾希望它不工作。任何關於我需要做什麼改變或者我的代碼出現問題的見解都將是一個巨大的幫助。

Answer 1

你的viewmodel唯一的東西就是城市信息的集合。與視圖模型相比，這更像是一種數據模型。特別是，用於單擊綁定的zoom函數不在您的視圖模型中。它看起來像是綁定處理程序的一部分，並且您在那裏使用了很多this，這讓我感到困惑。

爲了讓您的兩種類型的點擊做同樣的事情，您確實需要讓myFunction可用於視圖模型，並讓li-span點擊與標記偵聽器使用相同的數據（或this）調用它。這可能意味着讓您的自定義綁定處理程序接受一個包含幾件事情的對象（如點擊回調）。

您可能會感興趣this binding for maps對您有幫助。他給出了一個demo fiddle。