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

在我的Rails应用程序中，我有两个视图，它们基于flot图表和

现在，这两个页面仅在

plotNames

array中不同

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

如前所述，除此之外，我还有两个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

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）”
#图表颜色默认值
$chrt_border_color=“#efefef”
$chrt_grid_color=“#DDD”
$chrt_main=“#E24913”
#红色的
$chrt_second=“#6595b4”
#蓝色的
$chrt_third=“#FF9F01”
#橙色的
$chrt_fourth=“#7e9d3a”
#绿色的
$chrt_fifth=“#BD362F”
#深红色
$chrt_mono=“#000”
图表=
生成的对象：（所有系列，所有系列数据）->
plotData=[]
对于系列，我在所有系列中
obj=
标签：series.replace/uuug/g，“|”
数据：所有系列数据[i]
颜色：colorArray[i]
#obj=(
#标签：系列
#console.log“推送系列#{series}”
#数据：所有系列数据[i]
#颜色：colorArray[i]
#console.log“将颜色#{color}推送到#{series}系列”
#   )
plotData.push对象
返回绘图数据
togglePlot：（plotName、seriesIdx、totalNumOfSeries）->
console.log“seriesIdx是：#{seriesIdx}”
someData=this.plot[plotName].getData（）
someData[seriesIdx totalNumOfSeries].lines.show=不是someData[seriesIdx totalNumOfSeries].lines.show
someData[seriesIdx totalNumOfSeries].points.show=不是someData[seriesIdx totalNumOfSeries].points.show
this.plot[plotName].setData someData
this.plot[plotName].draw（）
回来
getTooltip：（标签、xval、yval、flotItem）->
返回'+label+'+'+'
Build:'+flotItem.series.data[flotItem.dataIndex][2]+'+'+'
运行ID:{flotItem.series.data[flotItem.dataIndex][3].toString（）}“+'
结果：'+Chart.commify（yval）+”
委员会：（x）->
返回x.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
generateChartOptions：（图例_容器，记号）->
this.legendindex=0
返回(
系列：
线：
秀：真的
要点：
秀：真的
十字线：
模式：“x”
颜色：“FF9900”
图例：
容器：$（“#{legend#u container}”）
labelFormatter：（标签，系列）->
""
#labelFormatter：（标签，系列）->
#                   ""
无列：4
#隐藏的：真的
网格：
可悬停：正确
可点击：正确
tickColor:$chrt\u border\u color
边框宽度：0
边框颜色：$chrt\u border\u color
工具提示：正确
工具提示：
内容：Chart.getTooltip
#内容：“价值$x价值$y”，
defaultTheme:false
xaxis：
滴答声：滴答声
轮换工时：30
选择：
模式：“xy”
)
绘图：{}
plotNames=[“带宽”、“标准化\u bw”、“并发\u流”]
jQuery->
jQuery.each plotNames，（索引，名称）->
如果$（“#”+名称+“#图表”）.长度
console.log“处理#{name}_图表”
原始数据=$（“#”+名称+“#图表”）。数据（'结果'）
刻度=$（“#”+名称+“#图表”）。数据（'ticks'）
所有#u系列=$（“#”+名称+“#u图表”）。数据（'系列'）
console.log“系列的总长度为{all_series.length}”
Chart.plot[name]=$.plot（$（“#“+name+”#图表），Chart.generateDataObjects（所有#系列，原始#数据），Chart.generateChartOptions（名称+“#图例”，记号））
$（“#”+名称+“#图例”）。在“单击”、“a.legendtoggle”（事件）->
Chart.togglePlot（名称，$（this）.data（'index'），所有系列.length）
返回错误
$（“#”+名称+“#图表”）。绑定“选定的绘图”（事件，范围）->
Chart.plot[name]=$.plot（$（“#”+name+“_-Chart”），Chart.plot[name].getData（），$.extend（true，{}，Chart.generateChartOptions（name+“#u-legend”，ticks），
xaxis：
最小值：ranges.xaxis.from
最大值：ranges.xaxis.to
亚克斯：
最小值：ranges.yaxis.from
最大值：ranges.yaxis.to
))
回来
$（“#”+名称+“#图表”）。绑定“dblclick”，（事件、位置、项目）->
Chart.plot[name]=$.plot（$（“#”+name+“_-Chart”），Chart.plot[name].getData（），$.extend（true，{}，Chart.generateChartOptions（name+“#u-legend”，ticks），
xaxis：
min:null
max:null
亚克斯：
min:null
max:null
))
回来

将该代码放在

资产/javascripts/

中的某个地方，然后通过AJAX调用加载数据，或者将其嵌入到页面中，我想这太笼统了。另外，我确信没有Ajax调用的共享是可能的，但我不知道如何实现这一点。一种方法（不确定是否是最干净的方法）是将.erb添加到您的文件名中，并将公共代码移动到您需要的部分中。这将是一个好主意