0

現在プロダクションモードになっている私のアプリケーションは、成長して、データをGoogle Charts API javascriptコードに（繰り返し）埋め込んで、いくつかのスイートマップをデータでオーバーレイするビューの一部の開発モードコードに直面する必要があります。 、真剣にオーバーホールする必要があります。

コードは次のとおりです。

<h1>US Map of Startup Density</h1>

<% i = 0 %>

 <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geochart']});
   google.setOnLoadCallback(drawMarkersMap);

   function drawMarkersMap() {
   var data = google.visualization.arrayToDataTable([
    ['Location', 'Startups'],
    <% @locations.count.times do %>
                [<%= "'#{@locations[i].name}', #{@locations[i].d_s}" %>],
         <% i += 1 ;end %>

 ]);

  var options = {
   region: 'US',
   resolution: 'provinces',
   displayMode: 'markers',
   magnifyingGlass: {enable: true, zoomFactor: 9.0},
   colorAxis: {colors: ['green', 'blue']}
 };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};
</script>
</head>
<body>
<h4>All cities with less than 10 startups have been exempted from this graph.</h4>
 <div id="chart_div" style="width: 900px; height: 500px;"></div>

そして、すぐにお気づきかもしれませんが、JavaScriptにrubyを直接埋め込むことで、いくつかの「ノーノー」をコミットしました。当時、私はそれ以上のことは知りませんでしたが、それが機能することにもかなり驚いていました。しかし、そうしました。そして今、私はこのマップをプロダクションモードで大衆に提供することができるのではないかと思っています。javascriptのコンパイル（私はproduction.rbでそれをオフにしようとさえしました）プロセスがjavascriptを文字化けさせ、Googleに読めなくしているように見えるからです。

ご覧いただきありがとうございます

  • gon gemの使用を検討しましたが、このレベルの複雑さを考えると、どのようにしたらよいのでしょうか。各データを個別のインスタンス変数としてコントローラーに手動で配置するだけでは不十分です。
  • 私はこれをjavascriptで処理しようと考えましたが、javascriptを本当に知りません。そして、処理するActiveRecord呼び出しがあります。
  • javascriptアセットのコンパイルを無効にすることを検討しましたが、これまでのところ機能しませんでした。私はそれを間違ってしたかもしれません。私はproduction.rbでコンパイルしているアセットを無効にしようとしただけです。
4

1 に答える 1

1

最も明白なことは、LocationsリソースをAPIとして公開し、AJAX呼び出しを行ってJSONとしてロードすることだと思います。次に、そのJSONオブジェクトをトラバースして、ActiveRecordから取得しているすべてのデータをそこから引き出すことができます。

したがって、LocationsControllerでは：

class LocationsController < ApplicationController
   respond_to :html, :json

   def index
      respond_with Location.all
   end

   ...
end

これにより、LocationsリソースがJSONまたはHTMLとしてデータを要求する呼び出しに応答するようになります。ブラウザから場所のリストにアクセスできる可能性があると想定しているため、HTMLを残しました。アクセスできない場合は、respond_toから：htmlを削除できます。

これで、jQueryを使用して、JavaScriptからこのロケーションデータを簡単に取得できます。

<script type='text/javascript'>
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
    $.ajax({ url: '/locations', dataType: 'json' })
        .done(function(data) {
            // Now you have the same data as before in a JSON object, so you will still need to format it
        }
    );

     var options = {
      region: 'US',
      resolution: 'provinces',
      displayMode: 'markers',
      magnifyingGlass: {enable: true, zoomFactor: 9.0},
      colorAxis: {colors: ['green', 'blue']}
    };

     var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
     chart.draw(data, options);
};
</script>

ajax呼び出しは、JavaScriptが簡単に解釈できるJSON形式でLocationリソースを要求します。ここに最後のステップがあります。ここでは、JSON形式のデータをGoogle Chartsが受け入れるのと同じ形式に変換する必要がありますが、これは良いスタートになるはずです。

私が見逃した複雑さの層がないことを願っていますが、それは非常に簡単なことのように見えます。結局のところ、この種のシナリオはRailsが最も得意とすることの1つです。

于 2012-09-04T00:20:00.673 に答える