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

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

来自文档 ：

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

如果this是视图对象（而不是HTML元素），则$(this)毫无意义。 我相信，你想要做的是传递视图引用的元素 $ ，例如：

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

Answer 2

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

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

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

Answer 3

乔丹和gingerhendrix都是正确的，但让我退一步考虑更为笼统的问题=> vs. -> 。

毫无疑问，您可以看到/使用过的代码

$('#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始终意味着同样的事情。

事情是这样的：骨干hover围绕jQuery的包裹hover在这样一种方式， this点在查看实例反正...所以它实际上并没有在你的情况下，无论使用->或=> 这就是他们在文档中使用$(this.el)的原因。 这很好，因为您几乎肯定希望在处理事件时能够访问视图的属性。 正如gingerhendrix指出的那样， this.el将为您提供整体View元素，而不是接收hover事件的特定元素; 但事件对象e有你需要的东西（以及更多）。

有关绑定函数运算符的更多信息， 请查看我的书 。

Answer 4

那么$（这个）并没有让我这么做，所以我做了$（event.target）。 这肯定会起作用。

Answer 5

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

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

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