javascript - 带选项的 Coffeescript 函数

Question

我有一个网页，我想在其中使用 Kendoui Dataviz 图表显示不同的图表。这些图表有不同的选项。现在我希望能够从 HTML 设置正确的图形选项。与 Kendoui 文档不同，其中选项始终绑定(bind)到某个 #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，没有函数包装器)，我在其中设置选项并运行一个函数来决定哪些 div 应显示哪个图形。

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

更好的方法(评估是危险的，应该避免):

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]