d3.js CoffeeScript類執行上下文

Question

我正在使用CoffeeScript類創建d3.js圖表​​。我想的方法連接到一個點擊事件，然後運行取決於被點擊了什麼其他方法：

class @Chart 

    drawChart: -> 
    ... 

    dataArea 
     .enter() 
     .append("path") 
      .on("click", @onClick); 
    ... 

    onClick: -> 
    if d3.select(this).attr("type") == 'video' 
     @runVideo(d3.select(this).attr("title")) 

    runVideo: -> 

的問題是，在onclick方法執行上下文（「本」）是選擇和不是Chart類，所以「runVideo不是函數」。我如何從onClick方法中訪問選擇屬性並運行runVideo方法？

Answer 1

你想要做的是在添加點擊回調時以某種方式捕獲this。

您有幾種選擇在這裏：

// The Coffeescript way: 
.on("click", (args...) => @onClick(args...)); 

// The jQuery way: 
.on("click", $.proxy(@onClick, @)) 

// The ECMAscript5 way: 
.on("click", @onClick.bind(@)) 

然後，你需要修復您的onClick這樣：

onClick: (evt) -> 
    if d3.select(evt.target).attr("type") == 'video' 
    @runVideo(d3.select(evt.target).attr("title"))