Javascript google place自动完成上的Coffeescript循环

我试图在同一页面中集成多个Google Places自动完成字段，但我无法理解为什么这个伪代码会起作用：

$ ->
  options = types: ["(cities)"]

  insts = []
  elements = document.getElementsByClassName('autocomplete_city')

  insts[0] = new google.maps.places.Autocomplete(elements[0], options)
  google.maps.event.addListener insts[0], "place_changed", ->
    place = this.getPlace()
    datas = place.geometry.location.lat()+"::"+place.geometry.location.lng()

    $(elements[0]).next('input.autocomplete_city_id').val(datas)


  insts[1] = new google.maps.places.Autocomplete(elements[1], options)
  google.maps.event.addListener insts[1], "place_changed", ->
    place = this.getPlace()
    datas = place.geometry.location.lat()+"::"+place.geometry.location.lng()

    $(elements[1]).next('input.autocomplete_city_id').val(datas)

虽然此循环版本不起作用：

$ ->
  options = types: ["(cities)"]

  insts = []
  elements = document.getElementsByClassName('autocomplete_city')

  i = 0
  for element in elements
    insts[i] = new google.maps.places.Autocomplete(element, options)

    google.maps.event.addListener insts[i], "place_changed", ->
      place = this.getPlace()
      datas = place.geometry.location.lat()+"::"+place.geometry.location.lng()

      $(element).next('input.autocomplete_city_id').val(datas)

    i += 1

在这种情况下，即使您键入了第一个自动完成输入（=接收器的“element”变量始终是数组中的最后一个），自动完成数据也只填充最后一个“autocomplete\u city\u id”

---

这两个代码片段不是完全相同，还是我遗漏了一些严肃的Javascript OOP原则？这是咖啡脚本陷阱吗

我的建议是，编译的js中的

push

方法可能会导致奇怪的行为

我对您的代码进行了一些重构，并在循环中添加了

return

$ ->
  options = types: ["(cities)"]

  insts = []
  elements = document.getElementsByClassName('autocomplete_city')

  for element, i in elements
    insts[i] = new google.maps.places.Autocomplete(element, options)

    google.maps.event.addListener insts[i], "place_changed", ->
      place = @.getPlace()
      datas = "#{place.geometry.location.lat()}::#{place.geometry.location.lng()}"
      $(element).next('input.autocomplete_city_id').val(datas)
      return
    return

---

如CoffeeScript网站所述：

当使用JavaScript循环生成函数时，通常会插入一个闭包包装器，以确保循环变量被关闭，并且所有生成的函数不只是共享最终值。CoffeeScript提供do关键字，该关键字立即调用传递的函数，转发任何参数

您可能会修改代码，如下所示：

$ ->
  options = types: ["(cities)"]

  insts = []
  elements = document.getElementsByClassName('autocomplete_city')

  i = 0
  for element in elements
    do (element) ->
      insts[i] = new google.maps.places.Autocomplete(element, options)

      google.maps.event.addListener insts[i], "place_changed", ->
        place = this.getPlace()
        datas = place.geometry.location.lat()+"::"+place.geometry.location.lng()

        $(element).next('input.autocomplete_city_id').val(datas)

      i += 1

另外：

for

语句可以像

for元素、index

一样使用。然后可以删除

i=0及其增量。
是的，可以，谢谢：-）。尽管如此，弗兰克的下一个回答指出了解决这一问题的“Cooffeeskit方法”。