CoffeeScript - 在Rails应用程序中共享文件之间的数据

Question

在我的Rails应用程序中，我有两个基于flot chart生成图表的视图和this post

现在，这两个页面仅在plotNames数组中有所不同。

这显然是一个糟糕的实现，所以我想知道在页面之间共享相关部分的最佳方式是什么？

如上所述，除此之外，我有两个coffescript文件：

    colorArray = []
colorArray.push "rgba(180, 0, 75,    0.6)"
colorArray.push "rgba(0, 150, 100,   0.6)"
colorArray.push "rgba(0, 0, 255,     0.6)"
colorArray.push "rgba(140, 0, 255,   0.6)"
colorArray.push "rgba(90, 180, 20,   0.6)"
colorArray.push "rgba(255, 236, 0,   0.6)"
colorArray.push "rgba(234, 170, 21,  0.6)"
colorArray.push "rgba(95, 180, 190,  0.6)"
colorArray.push "rgba(214, 92, 63,   0.6)"
colorArray.push "rgba(218, 106, 234, 0.6)"
colorArray.push "rgba(213, 128, 155, 0.6)"

# chart colors default 
$chrt_border_color = "#efefef"
$chrt_grid_color = "#DDD"
$chrt_main = "#E24913"

# red       
$chrt_second = "#6595b4"
# blue      
$chrt_third = "#FF9F01"
# orange    
$chrt_fourth = "#7e9d3a"
# green     
$chrt_fifth = "#BD362F"
# dark red  
$chrt_mono = "#000"

Chart = 

    generateDataObjects: (all_series, all_series_data) ->
        plotData = []

        for series, i in all_series
            obj =
                label: series.replace /__/g, "|"
                data: all_series_data[i]
                color: colorArray[i]

            # obj = (
            #   label: series
            #   console.log "pushing series #{series}"
            #   data: all_series_data[i]
            #   color: colorArray[i]
            #   console.log "pushing color #{color} to #{series} series"
            #   )
            plotData.push obj

        return plotData

    togglePlot: (plotName, seriesIdx, totalNumOfSeries) ->
        console.log "seriesIdx is: #{seriesIdx}"
        someData = this.plot[plotName].getData()
        someData[seriesIdx-totalNumOfSeries].lines.show = not someData[seriesIdx-totalNumOfSeries].lines.show
        someData[seriesIdx-totalNumOfSeries].points.show = not someData[seriesIdx-totalNumOfSeries].points.show
        this.plot[plotName].setData someData
        this.plot[plotName].draw()
        return

    getTooltip: (label, xval, yval, flotItem) ->
        return '<span class="label bg-color-teal txt-color-white">'+label+'</span>'+'<br>Build: <span>'+ flotItem.series.data[flotItem.dataIndex][2]+'</span>' +"<br>Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][3].toString()}</strong>" + '<br>Result: <span>'+Chart.commify(yval)+'</span>'

    commify: (x) ->
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    generateChartOptions: (legend_container, ticks) ->
        this.legendindex = 0
        return (
            series:
                lines:
                    show: true

                points:
                    show: true

            crosshair:
                mode: "x"
                color: "#FF9900"

            legend:
                container: $("##{legend_container}")
                labelFormatter: (label, series) ->
                    "<a href=\"javascript:void(0);\" class=\"legendtoggle\" data-index=\"" + Chart.legendindex++ + "\">" + label + "</a>"
                # labelFormatter: (label, series) ->
    #                   "<a href=\"javascript:void(0);\" onClick=\"Chart.togglePlot(" + series.idx + "); return false;\">" + label + "</a>"
                noColumns: 4
                # hideable: true

            grid:
              hoverable: true
              clickable: true
              tickColor: $chrt_border_color
              borderWidth: 0
              borderColor: $chrt_border_color

            tooltip: true
            tooltipOpts: 
              content : Chart.getTooltip 
              #content : "Value <b>$x</b> Value <span>$y</span>",
              defaultTheme: false

            xaxis:
                ticks: ticks
                rotateTicks: 30

            selection:
                mode: "xy"
            )

    plot: {}

plotNames = ["bandwidth", "normalized_bw", "concurrent_flows"]


jQuery ->
    jQuery.each plotNames, (index, name) ->
        if $("#"+name+"_chart").length
            console.log "handling #{name}_chart"
            raw_data = $("#"+name+"_chart").data('results')

            ticks = $("#"+name+"_chart").data('ticks')
            all_series = $("#"+name+"_chart").data('series')
            console.log "total # of series is #{all_series.length}"

            Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(name+"_legend", ticks))

            $("#"+name+"_legend").on 'click', 'a.legendtoggle', (event) ->
                Chart.togglePlot(name, $(this).data('index'), all_series.length)
                return false

            $("#"+name+"_chart").bind "plotselected", (event, ranges) ->
                Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend', ticks),
                  xaxis:
                    min: ranges.xaxis.from
                    max: ranges.xaxis.to
                  yaxis:
                    min: ranges.yaxis.from
                    max: ranges.yaxis.to
                ))
                return

            $("#"+name+"_chart").bind "dblclick", (event, pos, item) ->
                Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend', ticks),
                  xaxis:
                    min: null
                    max: null
                  yaxis:
                    min: null
                    max: null
                ))
                return