进行数据绑定：单击的方式类似于marker.addListener（）

Question

I'm making an app that uses knockoutjs to load google maps and multiple markers from an observableArray. There are corresponding <li> elements for each marker also pulled from my observableArray. Each marker has a marker.addListener('click', function) that pulls up an infowindow which will eventually have some info about that location in pulled from an outside api. My issue is connecting the <li> elements with its corresponding marker. I would like to use a data-bind='click:' on a <li> element and have the same result as if I had clicked on the marker.

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

I've tried doing something like

      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);
        });
      };

But it is not working as I had hoped. Any insight on what I need to do differently or whats going wrong with my code would be a huge help.

Answer 1

The only thing in your viewmodel is the collection of city information. That's more of a data model than a view model. In particular, the zoom function for your click binding isn't in your view model. It looks like it's part of the binding handler, and you're using this a lot in there, which is confusing to me.

To get your two types of clicks to do the same thing you really need to have myFunction available to the viewmodel and have the li-span click call it with the same data (or this ) as the marker listeners do. This probably means making your custom binding handler take an object with several things in it (like callback for clicks).

You might find this binding for maps helpful. He gives a demo fiddle .