Question

我正在尝试在coffeescript中使用flot。返回的javascript包装函数调用中的所有方法，因此我无法使用.bind事件。 $（this）.bind'plothover'，（event，pos，item） - ＆gt;我的鼠标移动时没有被调用

$ ->
  $("#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

Answer 1

在flot/examples/interacting/index.html我用

替换了脚本

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

其中interact.js是此coffeescript文件的编译版本：

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) ->工作正常。

当编译为js并且未调用时，Coffeescript .bind似乎被包装在函数内

1 个答案: