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>

而且，正如您可能立即注意到的那样，我通过将 ruby​​ 直接嵌入到 javascript 中来犯了几个“禁忌”。当时，我对此一无所知，并且对它甚至起作用感到相当惊讶。但确实如此。现在我想知道如何才能在生产模式下将这张地图提供给大众。因为 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 最擅长的事情之一。

于 2012-09-04T00:20:00.673 回答