document.addEventListener“这个”背景下

Question

我正在写一个简单的CoffeeScript类，但我运行到一个上下文的问题与此代码：

class DragDrop 
constructor: (@selector, @bodyDragEnterClass = "drag-over") -> 
    @attachEventHandlers() 

attachEventHandlers:() -> 
    document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is "drag-over" 
    document.addEventListener("dragenter", @onDragEnter, false) 

onDragEnter:() -> 
    document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is undefined 
    jQuery("body").addClass(@bodyDragEnterClass) 

window.DragDrop = DragDrop 

当attachEventHandlers方法被调用时，@bodyDragEnterClass是按预期设置为“拖拽”。但是，当触发dragenter事件并调用onDragEnter方法时，@ bodyDragEnterClass为“未定义”。

我创建了一个的jsfiddle证明上下文问题就在这里：http://jsfiddle.net/SVvrM/

我怎样才能解决这个问题？

Answer 1

CoffeeScript中有“fat arrow”的经典案例。

您需要访问在不同上下文中执行的回调内的DragDrop this值。使用FAT箭头会的this当前值绑定到onDragEnter功能：

# "fat arrow" function binding 
onDragEnter:() => 
    document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is undefined 
    jQuery("body").addClass(@bodyDragEnterClass)