Rails 3.1 Ненавязчивый Javascript с Flot

Question

Все,

Я использую библиотеку графиков Flot в приложении для рельсов. В настоящее время у меня есть страница, работающая как и ожидалось, однако весь javascript для сборки графика флота встроен в мой файл .html.erb.

Есть ли простой способ переместить статическую часть javascript во внешний файл, сгенерировать динамические данные как обычные в представлении/контроллере и передать их в файл javascript? (Через "данные-сообщения" ??)

Базовая схема выглядит следующим образом:

Контроллер:

@portfolios = # a bunch of portfolios 

Вид:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    // show & hide some stuff 
    var options = { 
    ....... 
    }; 

// THIS IS THE DYNAMIC PORTION 

var portfolio_collection = [] 
var id_lookup = [] 

<% @portfolios.each do |portfolio| %> 
    <% attribute1 = portfolio.attribute1 %> 
    <% attribute2 = portfolio.attribute2 %> 
    portfolio_collection.push([<%= attribute1 %>,<%= attribute2 %>]); 
    id_lookup.push([<%= portfolio.id %>]); 
<% end %> 

// END DYNAMIC 

var plot = $.plot( // This is the plot command, puts graph in #select div 
     $("#select"), 
     [ { data: portfolio_collection, label: "Return"} ], 
     options 
    ); 

// A SCHWACK OF JAVASCRIPT 
........ 

</script> 

<h1>My HTML content...</h1> 

<br /> 
<div id="select" style="width:600px;height:300px;"></div> 
.... a bunch of other divs which renders javascript results from clicking on the graph .... 

Answer 1

Что я сделал, чтобы обойти эту проблему issue, переводит скрипт флота в файл portfolios.js. Затем я связал событие щелчка, чтобы создать граф флота. В anchortab я ставлю что-то вроде этого

<a id="generate" data-var="<%=@portfolo_data%>" data-var="<%=@portfolo_options%>">Generate Graph</a> 

Затем в файле JS я нажал на звонок, как этот

$(function(){ 
    $("#generate").click((event) { 
     event.preventDefault(); 
     eval("var data =" + $("#generate").data("var") + ";"); 
     eval("var options =" + $("#generate").data("options") + ";"); 
     $.plot($("#select"), data, options); 
    }); 
}); 

Все, что осталось сделать, это пристроить @portfolio_data и струнами @portfolio_options в диспетчере портфолио.