Coffeescript .bind似乎在编译到js时被包装在一个函数中，并且不被调用 [英] Coffeescript .bind seems to be wrapped inside a function when compiled to js and is not called

问题描述

我想在coffeescript中使用flot。返回的javascript将所有的方法放在一个函数调用中，因为我不能使用.bind事件。
$（this）.bind'plothover'，（event，pos，item） - >当我的鼠标移动时不会被调用

  $  - > 
 $（＃flot-placeholder1）。text（Amit）
 plot = $ .plot（$（＃flot-placeholder1），dataset，options）
 $ ＃flot-placeholder1）。UseTooltip（）
 
 $ .fn.UseTooltip =  - > 
 alertUseTooltip
 ** $（this）.bind'plothover'，（event，pos，item） - > ** 
 alertUseTooltip
 
 if（previousLabel isnt item.series.label）或（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 ）.getMonth（）
如果item.seriesIndex为0或item.seriesIndex为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 
   
 
解决方案
  flot / examples / interacting / index.html 我用
替换脚本
 
 
 < script language =javascripttype =text / javascriptsrc = interact.js>< / script> 
  
其中 interact.js 的这个coffeescript文件：
  plot = null＃使用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）} 
]，
系列：
行：
显示：true 
点：$ b​​ $ b show：true 
 grid：
 hoverable：true，
 clickable：true 
 yaxis：
 min：-1.2，
 max：1.2 
 $ b b $（＃placeholder）。UseTooltip（）
 $（＃placeholder）。UseClick（）
 
 ###添加Flot版本字符串到页脚### 
 $（＃footer）。prepend（Flot＃{$。plot.version}& ndash;）
 
 $ .fn.UseTooltip = 
 previousPoint = null 
 @bindplothover，（event，pos，item） - > 
 if $（＃enablePosition：checked）。length 
 str =（＃{pos.x.toFixed（2）}，＃{pos.y.toFixed（2）}）
 $（＃hoverdata）。text（str）
 
如果$（＃enableTooltip：checked）。length 
如果item 
如果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 =  - > 
＃@已经是一个jQuery obj，不需要$（this）
 @bindplotclick，（event，pos，item） - > 
 if item 
 $（＃clickdata）。text（ -  click point＃{item.dataIndex} in＃{item.series.label}）
 plot.highlight .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）
  
它的功能与原来一样。将网格设置为 hoverable ， $（this）.bindplothover， event，pos，item） - > 工作正常。
 
I am trying to use a flot in a coffeescript .The returned javascript wraps all the methods in a function call and because of that I am not able to use the .bind event.
$(this).bind 'plothover', (event, pos, item) -> is not getting called when my mouse moves
$ ->
  $("#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

解决方案
In the flot/examples/interacting/index.html I replaced the script with
<script language="javascript" type="text/javascript" src="interact.js"></script>
where interact.js is the compiled version of this coffeescript file:
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)
It functions just like the original.  With the grid set to hoverable, $(this).bind "plothover", (event, pos, item) -> works just fine.

                        
这篇关于Coffeescript .bind似乎在编译到js时被包装在一个函数中，并且不被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！