33

我有一个咖啡脚本类，它有一些 jquery 事件监听器。我想使用粗箭头=>来避免引用类，但我仍然需要引用通常与this. 我怎样才能同时使用两者？

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)
4

4 回答 4

37

CoffeeScript 链接this到@外部上下文，因此您无法访问 jQuery 提供的上下文（也就是所需的“this”）。改用event.target：

class PostForm
    constructor: ->
        $('ul.tabs li').on 'click', (event) =>
            tab = $(event.target)
            @highlight_tab(tab)
于 2012-09-28T23:12:05.110 回答
36

使用 evt.currentTarget

您可能应该使用evt.currentTarget（相当于this）而不是evt.target（不是）。如果您正在点击click通知的节点具有子节点，则evt.target可能是这些子节点之一，而不是您添加click处理程序的节点。

有关此行为的演示，请参阅http://codepen.io/ddopson/pen/erLiv。（单击内部红色框以查看currentTarget指向红色 div 而target指向事件处理程序注册的外部蓝色 div）

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

回答所提出的问题 - 获取 `=>` 和 `this`：

您可以执行以下操作...

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

这些空间很关键，因为它们可以防止咖啡this大嚼_this。

使用 `self` 和 `->`

或者，执行以下操作...

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

这类似于 CQQL 的答案，除了我更喜欢惯用的self用作变量名；我的VIM 语法高亮规则将颜色self作为一个“特殊”变量，就像this,arguments或prototype.

于 2013-03-14T23:48:23.583 回答
3

我更喜欢这个版本，因为我更容易理解它。

class PostForm
    constructor: ->
        post_form = this

        $('ul.tabs li').on 'click', (event) ->
            tab = $(this)
            post_form.highlight_tab(tab)
于 2012-09-28T23:14:51.863 回答
0

您可能希望从函数访问构造函数中设置的变量。这就是你的做法（关键是调用函数时首先用细箭头self提取）：this

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)

顺便说一句：这是对何时使用胖箭头和瘦箭头的一个很好的解释。

概括：

  1. 你在函数中使用这个（@）吗？
  2. 您是否想稍后执行该功能，可能从不同的范围？
于 2018-08-31T05:07:49.073 回答