Генерация JSON в Rails для параметра объекта JavaScript - PullRequest
0 голосов
/ 16 сентября 2010

Я пытаюсь сгенерировать диаграмму в своем проекте Rails 3, используя библиотеку canvasXpress HTML5 / JavaScript. Их API для построения диаграмм использует JSON в качестве одного из параметров в своем конструкторе. Например:

new CanvasXpress('canvas', /* JSON here */);

В Rails у меня будет представление, которое отображает диаграмму как часть ее общего результата. Таким образом, JavaScript для создания диаграммы будет жить в представлении.

Я не совсем уверен, как заставить Rails генерировать JSON, который нужен JavaScript. Должен ли JSON генерироваться в частичном представлении?

В любом случае, пример был бы хорош.

1 Ответ

1 голос
/ 16 сентября 2010

Маршрут, который я выбрал в подобной ситуации, состоял в том, чтобы использовать два файла представления (одно действие) и два запроса для рендеринга 1-й страницы, а затем 2-го json / data для графика. (Я использую замечательную библиотеку HighCharts)

В нашем случае важно было убедиться, что страница, загруженная (со всеми навигацией, опциями и т. Д.) Перед потенциально тяжелой / длинной обработкой данных, необходимой для предоставления json, была важна. Это также дало нам преимущество представления только для JSON.

Контроллер:

def show
  @graph = Graph.find(id)
  respond_to do |format|
    format.html do
      @variable_needed_for_html_layout = current_user.graphs
    end

    format.js do 
      @data = @graph.process_data
    end
  end
end

Представление html (show.html.erb) просто отображает всю разметку html и выполняет запрос ajax (jquery) для js:

  <script type='text/javascript'>
    $(document).ready(function(){
      $.getScript('<%= graph_path(@graph, :js) -%>');
    });
  </script>
  <div id="highchart"></div>

Затем представление js (show.js.erb) выполняет всю тяжелую работу:

 var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'highchart',
    }
    ...
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...