Coffeescript .bind 在编译为 js 时似乎被包裹在一个函数中并且没有被调用答案

【问题标题】：Coffeescript .bind seems to be wrapped inside a function when compiled to js and is not calledCoffeescript .bind 在编译为 js 时似乎被包裹在一个函数中并且没有被调用
【发布时间】：2026-01-08 01:20:07
【问题描述】：

我正在尝试在咖啡脚本中使用 flot。返回的 javascript 将所有方法包装在函数调用中，因此我无法使用 .bind 事件。 $(this).bind 'plothover', (event, pos, item) -> 当我的鼠标移动时没有被调用

$ ->
  $("#flot-placeholder1").text("Amit")
  plot = $.plot($("#flot-placeholder1"), dataset, options)
  $("#flot-placeholder1").UseTooltip()

$.fn.UseTooltip = ->
  alert "UseTooltip"
  **$(this).bind 'plothover', (event, pos, item) ->**
    alert "UseTooltip"
    if item
      if (previousLabel isnt item.series.label) or (previousPoint isnt item.dataIndex)
        previousPoint = item.dataIndex
        previousLabel = item.series.label
        $("#tooltip").remove()
        x = item.datapoint[0]
        y = item.datapoint[1]
        color = item.series.color
        month = new Date(x).getMonth()
        if item.seriesIndex is 0 or item.seriesIndex is 2
          showTooltip item.pageX, item.pageY, color, "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)"
        else
          showTooltip item.pageX, item.pageY, color, "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)"
    else
      $("#tooltip").remove()
      previousPoint = null

【问题讨论】：

封装了哪些方法？生成的 JS 对我来说看起来不错。
生成的js "(function() { var options, plot, plotField, previousLabel, previousPoint, showTooltip; $(function() { //somecode }); $.fn.UseTooltip = function( ) { alert("UseTooltip"); return $(this).bind('plothover', function(event, pos, item) { var color, month, x, y; alert("UseTooltip"); if (item) { //somecode }); }; }).call(this); "当我的鼠标在 plot 上时什么都不会触发
如果你打开它，它会起作用吗？
是的，而不是coffeescript，我直接使用js，没有发生包装，然后它工作正常
你试过coffee --bare编译吗？

标签： javascript jquery ruby-on-rails-3 coffeescript flot

【解决方案1】：

在flot/examples/interacting/index.html 中，我将脚本替换为

<script language="javascript" type="text/javascript" src="interact.js"></script>

interact.js 是这个咖啡脚本文件的编译版本：

plot = null # make global for use by UseTooltip
$ ->
  sin = ([i, Math.sin(i)] for i in [0...14] by 0.5)
  cos = ([i, Math.cos(i)] for i in [0...14] by 0.5)
  plot = $.plot "#placeholder",
    [{ data: sin, label: "sin(x)"},
     { data: cos, label: "cos(x)"}
    ],
    series:
      lines:
        show: true
      points:
        show: true
    grid:
      hoverable: true,
      clickable: true
    yaxis:
      min: -1.2,
      max: 1.2

  $("#placeholder").UseTooltip()
  $("#placeholder").UseClick()

  ### Add the Flot version string to the footer ###
  $("#footer").prepend("Flot #{$.plot.version} &ndash; ")

$.fn.UseTooltip = ->
  previousPoint = null
  @bind "plothover", (event, pos, item) ->
    if $("#enablePosition:checked").length
      str = "(#{pos.x.toFixed(2)}, #{pos.y.toFixed(2)})"
      $("#hoverdata").text(str)

    if $("#enableTooltip:checked").length
      if item
        if previousPoint isnt item.dataIndex
          previousPoint = item.dataIndex
          $("#tooltip").remove()
          [x, y] = (d.toFixed(2) for d in item.datapoint)
          showTooltip item.pageX, item.pageY,
            item.series.label + " of #{x} = #{y}"
      else
        $("#tooltip").remove()
        previousPoint = null

$.fn.UseClick = ->
  # @ is already a jQuery obj, don't need $(this)
  @bind "plotclick", (event, pos, item) ->
    if item
      $("#clickdata").text(" - click point #{item.dataIndex} in #{item.series.label}")
      plot.highlight(item.series, item.datapoint)

showTooltip = (x, y, contents) ->
  $("<div id='tooltip'>#{contents}</div>").css({
          position: "absolute",
          display: "none",
          top: y + 5,
          left: x + 5,
          border: "1px solid #fdd",
          padding: "2px",
          "background-color": "#fee",
          opacity: 0.80
      }).appendTo("body").fadeIn(200)

它的功能与原版一样。将grid 设置为hoverable，$(this).bind "plothover", (event, pos, item) -> 工作正常。

【讨论】：