帶選項的Coffeescript功能

Question

我有一個網頁，我想用Kendoui Dataviz圖表顯示不同的圖形。 這些圖有不同的選項。現在我想能夠從HTML中設置正確的圖形選項。不像Kendoui文檔，選項總是綁定到某個#id。不是很有活力。於是，我開始像這樣的HTML：

<div data-options="CheapOptions" class="chartholder"> 
    <div id="Cheapo" style="height:180px;width:500px" class="chartClass"></div> 
</div> 
<div data-options="ExpensiveOptions" class="chartholder"> 
    <div id="Expensive" style="height:180px;width:500px" class="chartClass"></div> 
</div> 

然後，我有一個CoffeeScript的（自動編譯爲JS，無功能的包裝），我設置的選項並運行決定哪些申報單應顯示函數圖。

CheapOptions = 
    series: [ 
      name: "Costs 1" 
      data: [100] 
    , 
      name: "Costs 2" 
      data: [200] 
    ] 

ExpensiveOptions = 
    series: [ 
      name: "Costs 1" 
      data: [300] 
      color: "#AABBCC" 
    , 
      name: "Costs 2" 
      data: [400] 
    ] 

$ -> 
    $(".chartholder").each -> 
      mydiv = $(this) 
      myoptions = mydiv.data("options") 
      mygraph = mydiv.children(":first") 
      myid = "#" + mygraph.attr("id") 

      # APPLY THE GRAPH 
      $(myid).kendoChart myoptions  # DOESN'T WORK 
      $(myid).kendoChart[myoptions]() # DOESN'T WORK 
      $(myid).kendoChart CheapOptions # WORKS 

第一個選項給出了這樣的錯誤：

Error: Cannot call method 'CheapOptions' of kendoChart before it is initialized 

第二個選項給出了這樣的錯誤：

TypeError: 'undefined' is not a function (evaluating '$(n).kendoChart[r]()') 

第三個選項的工作表明，該函數可以看到的選項，但那麼我會在所有div中獲得相同的圖形，而它應該使用我放入HTML中的正確圖形。我怎樣才能做到這一點？

這裏有一個的jsfiddle，您可以與選項玩： http://jsfiddle.net/5TFAk/5/

Answer 1

一個更好的方法（EVAL是危險的，應該儘量避免）：

options = 
    CheapOptions: 
    series: [ 
     name: "Costs 1" 
     data: [100] 
    , 
     name: "Costs 2" 
     data: [200] 
    ] 
    ExpensiveOptions: 
    series: [ 
     name: "Costs 1" 
     data: [300] 
     color: "#AABBCC" 
    , 
     name: "Costs 2" 
     data: [400] 
    ] 

然後：

$(myid).kendoChart options[myoptions]