Rails 3.1 Flotを使用した控えめなJavascript

Question

すべて、

私はレールアプリケーションでFlotグラフライブラリを使用しています。私は現在、期待どおりのページが動作していますが、flotグラフをまとめるためのjavascriptはすべて、 "view" .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

flotsスクリプトをportfolios.jsファイルに移動します。その後、クリックイベントをバインドしてフロートグラフを生成しました。 anchortabでは私は私はこの

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

のようなコールを引っ張ったのjsファイルに続いて、この

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

のようなものを置くすべてのことが@portfolio_dataと@portfolio_options文字列を構築されてやって残っていますポートフォリオコントローラで。