Coffeescript - 如何应用闭包和匿名函数

Question

我正在尝试将 for 循环变量作为参数传递给 coffeescript 中的 onclick 方法，如下所示：

for index, option_value of @state.option_values
                  dom.span
                    key: "#{index} #{option_value.name}"
                    className: "pull-left col-md-3#{if option_value.selected then ' selected' else ''}"
                    onClick: () => @selectThis option_value


selectThis: (option_value_selected) ->
    alert(option_value_selected.name)

但option_value 总是指@state.option_values 中option_value 的最后一个值。我知道如何用普通的 javascript 解决这个问题。但是，如何在咖啡中解决这个问题？

Answer 1

问题在于你的函数：

onClick: () => @selectThis option_value

is 只是存储 option_value 引用，直到稍后调用 onClick 处理程序时才会对其进行评估。

这是 JavaScript 和 CoffeeScript 中循环的一个非常常见的问题，解决方案始终相同：在创建匿名函数时强制计算变量。你的：

@selectThis.bind(null, option_value)

通过调用Function.prototype.bind 函数来做到这一点（但在调用该函数时@ 将是null，所以要小心）。

JavaScript 中的一个常见习语是将循环体变成一个自调用函数：

for(i = 0; i < 6; ++i)
    (function(i) { ... })(i)

强制循环变量在每次迭代时进行评估。 CoffeeScript 有 do loops 作为这个成语的快捷方式：

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

一个惯用的 CoffeeScript 解决方案如下所示：

for index, option_value of @state.option_values
  do (index, option_value) =>
    dom.span
      key: "#{index} #{option_value.name}"
      className: "pull-left col-md-3#{if option_value.selected then ' selected' else ''}"
      onClick: => @selectThis option_value

Answer 2

终于找到正确的语法了，唉：

onClick: @selectThis.bind(null, option_value)