如何将 Ruby 插入 JavaScript 文件或使用 AJAX 调用？

Question

所以我有一些用户正在填写一个位置的纬度和经度。它们分别存储在 lat 和 lng 下的 Location 下。现在我在我的 JS 文件中使用以下代码对其进行了硬编码：

const markersByRegion = {
iowa: [{
        position: [39.988705, -86.061112],
        title: "Cedar Rapids"
    }]};
app.regions = () => {
  function init() {
      startGoogleMap();
  }

  let startGoogleMap = () => {
      let map = new google.maps.Map(document.getElementById("region-banner"), {
          zoom: 3,
          minZoom: 3,
          disableDefaultUI: true,
          gestureHandling: "cooperative",
          styles: mapStyle
      });
      var mapElement = document.getElementById("region-banner");
      const regionName = mapElement.getAttribute('data-region-name')

      let bounds = new google.maps.LatLngBounds();

      markersByRegion[regionName].forEach(({ position, ...opts }) => {
          const marker = new google.maps.Marker({
              ...opts,
              position: new google.maps.LatLng(...position),
              map
          });
          bounds.extend(marker.position);
      });

在我的地区 > 显示文件我有以下内容：

<div class="container-fluid">
 <div class="row">
  <div class="banner" id="region-banner" data-region-name="<%=@region.name.downcase%>">
<script>document.addEventListener('DOMContentLoaded', app.regions);</script>

我想要做的是根据用户输入使这个动态化，并根据输入分配标记。

编辑： 所以我尝试了，但失败了，用类似的东西替换变量：

const markersByRegion = {
 <%=Region.name%>: [{
   position: [<%=Location.lat%>, <%=Location.lng%>],
   title: '<%=Location.name%>' 
 }]

这会导致控制台中出现 Uncaught Error: Module build failed: SyntaxError: Unexpected token (5:4) 错误。我也尝试将数据属性放在我的区域显示页面中以提取数据，但我遇到了麻烦。

然后我决定在我的位置控制器中进行更改：

def marker
 @locations = Location.all
 respond_to do |format|
   format.json { render json: @locations }
   format.html
 end
end

然后将我的区域 JS 文件更新为：

import { mapStyle } from './styles/mapStyle';

app.regions = () => {
  function init() {
   startGoogleMap();
 }

 let startGoogleMap = () => {
   let map = new google.maps.Map(document.getElementById('region-banner'), {
    zoom: 3,
    minZoom: 3,
    disableDefaultUI: true,
    gestureHandling: 'cooperative',
    styles: mapStyle
  });
  var mapElement = document.getElementById('region-banner');
  const regionName = mapElement.getAttribute('data-region-name');

let bounds = new google.maps.LatLngBounds();

var promise = $.getJSON('/locations.json');

promise.done(function(data) {
  return $.each(data, function() {
    return new google.maps.Marker({
      position: { lat: data.lat, lng: data.lng },
      map: map
      // ...
    });
  });
});

所以我现在进入控制台：setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

我认为我可以通过将 parseFloat 放在 lat 和 lng 前面来解决这个问题，但这只会导致不同的错误：Module build failed: SyntaxError: Unexpected token, expected,.

我最终要做的是，当用户使用他们在 Location 模型下输入的纬度和经度记录位置时，它会在区域页面上动态更新。

Answer 1

您可以将文件重命名为your-script-name.js.erb。 rails 编译文件的顺序与文件扩展名顺序相反。例如，在这种情况下，它将首先编译 .erb（ruby 代码），然后将代码解释为 javascript。 你可以在这里查看更多信息：.js.erb VS .js

希望这会有所帮助，祝你好运！

Answer 2

JS 中的 ERB 插值通常是个坏主意，因为它会使您的脚本无法缓存、无法缩小且难以测试。

如果您只是想在地图上绘制一个点，您可以使用数据属性将其附加到文档：

<div class="thing" data-lat="<%= @location.lat%>" data-lng="<%= @location.lng%>">

如果你想画一堆标记或者动态地做，那么使用 ajax 来获取 json 数据是一种方法：

class ThingsController
  def index
     @things = Thing.all
     respond_to do |format|
       format.json { render json: @things }
     end
  end
end

---

var promise = $.getJSON('/things.json');

promise.done(function(data){
  return $.each(data, function(){
    return new google.maps.Marker({
       position: { lat: data.lat, lng: data.lng },
       map: map
       // ...
    });
  });
});