用knockout.js连接列表视图与地图标记 [英] connecting list view in knockout.js with map markers

问题描述

我一直试图连接列表视图，我通过淘汰与我的谷歌地图标记，我试过了。

  //单击列表视图中的项目
 self.listViewClick = function（list）{
 if （this.name）{
 map.setZoom（15）; 
 map.panTo（this.latlng）; 
 list.setAnimation（google.maps.Animation.BOUNCE）; 
} 
 
}; 
  

我尝试用self，this和marker更改list参数。我只能得到最后的地图标记，当我在列表视图中点击它时，它将其设置为标记。

我知道我错过了一些东西，但我可以'找出迄今为止的结果？

这是我迄今取得的进展 https://github.com/cperry24/interactive-map

感谢。

解决方案

你的问题很简单 - 我把你的代码放在这里 - http://codepen.io/dmoojunk/pen/KzXGKq

你只需要使用正在传入的健身环境。你在这里以'list'的形式传递它，但是你的if语句不会使用它......默认情况下，所有knockout click事件都将点击的上下文作为第一个param，因为它来自你的列表，它传递列表项 - 在这个例子中是健身房对象。

  self.listViewClick = func （体育馆）{
 if（gym.name）{
 map.setZoom（15）; 
 map.panTo（gym.latlng）; 
 gym.marker.setAnimation（google.maps.Animation.BOUNCE）; 
 infoWindow.open（map，gym.marker）; 
} 
  

我会在Javascript中了解变量范围 - 它会回答你的问题， '这'是，为什么人们使用'var self = this'等等。

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.

解决方案

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.

这篇关于用knockout.js连接列表视图与地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！