HAML 中的 JS 中的 Ruby：语法是什么？答案

【问题标题】：Ruby in JS in HAML: what's the syntax?HAML 中的 JS 中的 Ruby：语法是什么？
【发布时间】：2017-03-31 03:26:55
【问题描述】：

我的 HAML 视图末尾有这个 JS：

:javascript
  function initMap() {
    var map = new google.maps.Map(document.getElementById('leadsMap')),
      markers = [],
      bounds = new google.maps.LatLngBounds();

    - @leads.each do |lead|
      - next unless lead.latitude && lead.longitude
      var marker = new google.maps.Marker({
        position: {lat: #{lead.latitude}, lng: #{lead.longitude}},
        map: map
      });
      markers.push(marker);

    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);
  }

如何解析@leads 以便循环正常工作？就目前而言，我收到 undefined local variable or method 'lead' 错误。

【问题讨论】：

(a) 将 JavaScript 移动到单独的文件并 (b) 将 @leads 序列化为 JSON（可能首先过滤掉缺少坐标的条目）并处理，难道不是更有意义吗？那个 JavaScript 数据到你的 JavaScript 函数？像你一样尝试混合语言几乎总是会让人流泪和沮丧，即使你能做到这一点，它也往往会变成一个丑陋的烂摊子。
是的，我想我会暂时把它变成部分。可能是更智能的设计。

标签： javascript ruby-on-rails ruby haml ruby-on-rails-5

【解决方案1】：

如果您真的想在 JS 中使用 Ruby 变量，我建议您使用 gon 59 来完成此操作。

也就是说，我强烈建议不要使用脚本标签，因为理想情况下，出于安全原因，您希望阻止所有脚本标签，从而防止大多数形式的 XSS。

【讨论】：

【解决方案2】：

试试

...
%script
  - @leads.each do |lead|
    - next unless lead.latitude && lead.longitude
    var lead_latitude = "#{lead.latitude}";
    var lead_longitude = "#{lead.longitude}";
    var marker = new google.maps.Marker({
      position: {lat: lead_latitude, lng: lead_longitude},
      map: map
    });
...

我忘记了 google maps api 是否允许字符串中的 lat 和 lng，但您可以将 lead_latitude 和 lead_longitude 转换为他们的需要（parseInt、parseDouble 等）。

如果你仍然坚持将 ruby 变量放在 js 中的 haml 中

【讨论】：