CoffeeScript:如何使用胖箭头和这个？

Question

我有一个coffeescript类,它有一些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)

Answer 1

CoffeeScript链接两者this和@外部上下文,因此您无法访问jQuery提供的上下文(也就是所需的"this").event.target改为使用:

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

Answer 2

使用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.