node - CoffeeScript: ¿Cómo usar tanto la flecha de grasa como esto?

declare arrow function

Question

Tengo una clase coffeescript que tiene algunos oyentes de eventos jquery. Me gustaría usar la flecha adiposa => para evitar tener que hacer referencia a la clase, pero aún necesito una referencia al elemento que normalmente se usaría con this . ¿Cómo puedo usar ambos?

class PostForm
    constructor: ->
        $(''ul.tabs li'').on ''click'', =>
            tab = $(this)
            @highlight_tab(tab)
            @set_post_type(tab.attr(''data-id''))

    highlight_tab: (tab)->
        tab.addClass ''active''

    set_post_type: (id) ->
        $(''#post_type_id'').val(id)

Answer 1

Usando evt.currentTarget

Probablemente deberías usar evt.currentTarget (que es equivalente a this ) en lugar de evt.target (que no es). Si el nodo al que está tocando para notificaciones de click tiene nodos secundarios, evt.target podría ser uno de esos nodos secundarios en lugar del nodo al que agregó el controlador de click .

Consulte codepen.io/ddopson/pen/erLiv para obtener una demostración de este comportamiento. (haga clic en el recuadro rojo interno para ver que currentTarget señala en el div rojo mientras que el target apunta en el div azul exterior en el que está registrado el controlador de eventos)

$(''ul.tabs li'').on ''click'', (event) =>
  tab = $(event.currentTarget)
  @highlight_tab(tab)

Responda a la pregunta formulada: obteniendo both `=>` y `this`:

Puedes hacer lo siguiente ...

$(''ul.tabs li'').on ''click'', (event) =>
  tab = $(` this `)     # MAKE SURE TO ADD THE SPACES AROUND `this`
  @highlight_tab(tab)

Los espacios son críticos ya que previenen que el café lo _this en _this .

Usando `self` y` -> `

Alternativamente, haga lo siguiente ...

self = this
$(''ul.tabs li'').on ''click'', (event) ->
  tab = $(this)
  self.highlight_tab(tab)

Esto es similar a la respuesta de CQQL, excepto que prefiero el uso idiomático de self como el nombre de la variable; mi resaltado de sintaxis VIM gobierna el color del self como una variable "especial" tal como lo haría para this , arguments o prototype .

Answer 2

CoffeeScript vincula tanto this como @ al contexto externo, por lo tanto, no puede acceder al contexto que jQuery proporcionó (también conocido como el "esto" deseado). Use event.target en event.target lugar:

class PostForm
    constructor: ->
        $(''ul.tabs li'').on ''click'', (event) =>
            tab = $(event.target)
            @highlight_tab(tab)

Answer 3

Es posible que desee acceder a las variables establecidas en el constructor desde sus funciones. Esta sería la forma en que lo haces (la tecla llama a la función a través de self mientras que primero lo extraes con una flecha delgada):

class PostForm
    constructor: ->
        self = this

        @some_contrived_variable = true

        $(''ul.tabs li'').on ''click'', ->
            tab = $(this)
            self.highlight_tab(tab)
            self.set_post_type(tab.attr(''data-id''))

    highlight_tab: (tab) ->
        # Because of the fat arrow here you can now access @ again
        if @some_contrived_variable
            tab.addClass ''active''

    set_post_type: (id) ->
        $(''#post_type_id'').val(id)

Por cierto: esta es una gran explicación de cuándo usar la grasa y la flecha delgada.

Resumen:

1. ¿Usas esto (@) en la función?
2. ¿Desea ejecutar la función más tarde, posiblemente desde un alcance diferente?

Answer 4

Prefiero esta versión, porque puedo entenderla más fácilmente.

class PostForm
    constructor: ->
        post_form = this

        $(''ul.tabs li'').on ''click'', (event) ->
            tab = $(this)
            post_form.highlight_tab(tab)