connecting list view in knockout.js with map marke

Question

I've been trying to connect the list view i have within a foreach data bind through knockout with my google map markers, i have tried.

//Click on item in list view
    self.listViewClick = function(list) {
       if (this.name) {
           map.setZoom(15);
           map.panTo(this.latlng);
           list.setAnimation(google.maps.Animation.BOUNCE);
       } 

    };

I tried changing out the "list" argument with self, this, and marker. I can only get the last map marker to bounce when i click on it in the list view when its set to marker.

I know i'm missing something but i can't figure out what so far?

Here is my progress so far"

https://github.com/cperry24/interactive-map

Thanks.

Answer 1

You problem was a simple one - I dumped your code in here - http://codepen.io/dmoojunk/pen/KzXGKq

You just needed to use the gym context that was being passed in. You pass it in as 'list' here, but your if statement doesn't use it... By default all knockout click events pass the context of the click as first param, as this is coming from your list, it passes the list item - in this case the gym object.

self.listViewClick = function(gym) {
if (gym.name) {
  map.setZoom(15);
  map.panTo(gym.latlng);
  gym.marker.setAnimation(google.maps.Animation.BOUNCE);
  infoWindow.open(map, gym.marker);
}

I would learn about variable scope in Javascript - it will answer your questions around what 'this' is, why people use 'var self = this;' etc.