Rails 3.1 ненавязчивый Javascript с флотом - PullRequest
Новая
       33

Rails 3.1 ненавязчивый Javascript с флотом

3 голосов
/ 25 января 2012

All

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

Есть ли простой способ переместить статическую часть javascript во внешний файл, сгенерировать динамические данные как обычные в view / controller и передать их в файл javascript? (через «data-message» ??)

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

Контроллер: 

@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 ....

1 Ответ

3 голосов
/ 02 февраля 2012

Что я сделал, чтобы обойти эту проблему, так это переместил скрипт flot в файл portfolioios.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 в контроллере портфеля.

...