레일 3.1 부주의 한 자바 스크립트 (플롯 포함)

Question

모두

내 레일 어플리케이션에 Flot 그래프 라이브러리를 사용하고 있습니다. 나는 현재 페이지가 예상대로 작동하지만, flot 그래프를 작성하기위한 모든 자바 스크립트는 내 "view".html.erb 파일에 인라인되어 있습니다.

자바 스크립트의 정적 부분을 외부 파일로 옮기고보기/컨트롤러에서 동적 데이터를 규칙적으로 생성 한 다음 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 문자열을 구축 할 일은 남아 Portfolio Controller에서.