Question

我最近开始使用Brunch玩Backbone和CoffeeScript，并想知道为什么会这样......

events: {
  "click .button" : "open",
  "hover .info"   : "hover"
},

hover: =>
  $(this).css("background-color", "#333")

..不起作用。

根据我的理解，CoffeeScript有自己的this版本可能与jQuery使用的版本冲突，但在文档中我认为=>将它绑定到当前对象。我也试过->也无济于事。为什么这不起作用的任何想法？

HTML：

<div id='outer'> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
</div>

Answer 1

来自the docs：

在传递给jQuery之前，所有附加的回调都绑定到视图，因此在调用回调时，this继续引用视图对象。

如果this是视图对象（而不是HTML元素），$(this)则毫无意义。我相信，您要做的是传递视图所指的{em>元素 $，例如：

hover: =>
  $(this.el).css("background-color", "#333")
  # -----^

Answer 2

Jordan的回答是正确的 - 如果你想让视图的元素使用this.el。

在您的情况下，您需要触发事件的元素，即.info元素。这可以通过event.currentTarget 1

检索

hover: (e) =>
  $(e.currentTarget).css("background-color", "#333")

Answer 3

Jordan和gingerhendrix都是正确的，但让我退一步考虑=>与->的更一般性问题。

毫无疑问，你会看到/使用像

这样的代码

$('#foo').hover ->
  $(this).css('background-color', '#333')

为什么这样做？好吧，在内部，jQuery的悬停功能看起来像这样[显然风格化，显然]：

hover: (callback) ->
  for el in @
    el.onmouseenter = el.onmouseleave = (e) -> callback.call el, e

callback.call el, e就像调用callback(e)一样，只是它使this指向该函数调用内的el。这就是为什么$(this)为你提供了一个jQuery对象，它围绕着悬停事件所在的元素。

但如果你写了

，那就不行了

$('#foo').hover => ...

因为=> 会覆盖 call和apply;无论函数如何被调用，它都强制this始终表示相同的事物。

事情就是这样：Backbone的hover以hover指向View实例的方式包围jQuery的this ......所以它实际上对你的情况无关紧要是否使用->或=>。这就是他们在the docs中使用$(this.el)的原因。这很好，因为您几乎肯定希望在处理事件时能够访问视图的属性。正如gingerhendrix指出的那样，this.el将为您提供整体的View元素，而不是接收hover事件的特定元素;但事件对象e具有您所需要的（以及更多）。

有关绑定函数运算符的更多信息，请check out my book。

Answer 4

好吧（这个）没有让我这么做，所以我做了$（event.target）。这肯定会有用。

Answer 5

我在使用Coffee Script时编写了这样的jQuery调用：

$ -> $('#entryBox').val "Placeholder text"

我甚至都没有弄清楚它为什么会起作用，但确实有效。

jquery $（这个）不适用于咖啡脚本/骨干

5 个答案: