jquery $ (это) не работает в сценарии / магистрали кофе - PullRequest
Новая
       1

jquery $ (это) не работает в сценарии / магистрали кофе

4 голосов
/ 06 октября 2011

Я недавно начал играть с Backbone и CoffeeScript, используя Brunch, и мне было интересно, почему что-то подобное ... 

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>

Ответы [ 5 ]

8 голосов
/ 06 октября 2011

Из документов :

Все прикрепленные обратные вызовы привязываются к представлению перед передачей в jQuery, поэтому при вызове обратных вызовов this продолжает ссылаться нак объекту представления.

И если this является объектом представления (а не, скажем, элементом HTML), $(this) довольно бессмысленно.Я полагаю, что вы хотите передать элемент , на который ссылается представление $, например: 

hover: =>
  $(this.el).css("background-color", "#333")
  # -----^
5 голосов
/ 06 октября 2011

Ответ Джордана является правильным в этом отношении - если вы хотите, чтобы элемент представления использовал this.el.

В вашем случае вам нужен элемент, который вызвал событие, то есть элемент .info.Это можно получить через event.currentTarget 1 

hover: (e) =>
  $(e.currentTarget).css("background-color", "#333")
3 голосов
/ 06 октября 2011

Джордан и Джингерхендрикс оба правы, но позвольте мне на шаг отступить, чтобы рассмотреть более общий вопрос => против ->.

Вы без сомнения видели / использовали код, подобный 

$('#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, обернутый вокруг элемента, на котором включено событие hover.

Но это не сработало бы, если бы вы написали 

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

потому что => переопределяет call и apply; это заставляет this всегда означать одно и то же, независимо от того, как вызывается функция.

Вот в чем дело: hover в Backbone оборачивается вокруг hover в jQuery таким образом, что this в любом случае указывает на экземпляр View ... так что на самом деле в вашем случае не имеет значения, используете ли вы -> или =>. Вот почему они используют $(this.el) в документах . И это здорово, потому что вы почти наверняка захотите иметь доступ к свойствам представления при обработке событий. Как указал gingerhendrix, this.el даст вам общий элемент View, а не конкретный элемент, получающий событие hover; но объект события e имеет то, что вам нужно (и многое другое).

Подробнее об операторе связанной функции посмотрите мою книгу .

1 голос
/ 24 ноября 2011

Ну, $ (это) не работает, поэтому я сделал $ (event.target).Это будет работать наверняка.

0 голосов
/ 20 января 2012

Я пишу свои вызовы jQuery следующим образом при использовании Coffee Script: 

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

Я даже не удосужился выяснить, почему это работает, но работает

...