ruby on rails：传单导轨未加载答案

【问题标题】：ruby on rails: leaflet-rails not loadingruby on rails：传单导轨未加载
【发布时间】：2015-02-04 00:13:31
【问题描述】：

使用 RoR 4.1.4

我正在尝试使用leaflet-rails gem。我按照 github 页面中列出的步骤进行操作，但是当我尝试加载地图时，我看到了

ReferenceError: L is not defined

在浏览器控制台中。这显然意味着 gem 中的帮助程序正在加载和执行，但它找不到 leaflet.js 文件。

但是，页面的 head 部分显示 /assets/leaflet.js 正在被引用并且它实际上就在那里。

当我查看生成的代码时：

    <div id="map"></div>
    <script>
    var map = L.map('map')
    map.setView([-54.0, 6.08], 16)
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
              maxZoom: 18,
    subdomains: '',
    }).addTo(map)
    </script>
  </div>
  <script src="/assets/jquery.js?body=1" data-turbolinks-track="true"></script>
  <!-- all the other scripts loaded -->
  <script src="/assets/exif.js?body=1" data-turbolinks-track="true"></script>
  <script src="/assets/leaflet.js?body=1" data-turbolinks-track="true"></script>
  <!-- some more scripts -->

因此，gem 在地图 div 的正下方添加了一个脚本，然后，由于 sprockets 机制和所有其他原因，才会加载其他脚本。对我来说，这看起来很明显脚本不可能加载leaflet.js，因为它被之后引用！

那么...我是否误解了 RoR 如何处理 gems 和 javascripts？它一定在某个时候起作用了……

这是我的 /app/assets/javascript/application.js：

//= require jquery
//= require jquery.ui.widget

// Here I load a whole bunch of javascripts which are related to jquery-fileupload, cut for brevity
//= require bootstrap.min
//= require bootbox.min 
//= require bootstrap-datepicker

//= require exif 
//= require leaflet

//= require turbolinks
//= require_tree .

【问题讨论】：

标签： javascript ruby-on-rails gem leaflet sprockets

【解决方案1】：

不知道您是否能够解决您的问题。对我来说，我忘记了跑步：

rake assets:precompile

在部署到生产之前。

【讨论】：

【解决方案2】：

我在 Rails 中遇到了同样的问题。

传单在开发模式下工作（bower 管理）
Can't find variable L 处于生产模式

以下步骤没有帮助。

asset "leaflet"（鲍尔文件）
//= require leaflet/dist/leaflet.js (application.js)
*= require leaflet/dist/leaflet.css (application.css)
Rails.application.config.assets.precompile += ['leaflet/dist/leaflet.js', 'leaflet/dist/leaflet.css']
资产预编译并上传到生产public/assets/...

我还是错过了什么吗？

[解决方案]

这个问题可以通过http://leafletjs.com/examples/quick-start/传单推荐的CDN资产解决

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

但是，我更喜欢使用捆绑在我的应用服务器上的本地缓存预编译资产，而不是依赖公共 CDN、网络带宽和更多外部资源。

【讨论】：

【解决方案3】：

原来这可能是一些 RoR 特定的问题。

很多网站都推荐放

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

在文件末尾加载javascript的行，以加快页面显示。使用leaflet-rails gem，这不是很好，并且会产生上述问题。如果将同一行放在<head> 部分中，问题就会消失...

附：不过，我仍然对 gem 有问题，现在我明白了

Error: No value provided for variable {s}

如果我将“http://{s}.tile.osm.org/{z}/{x}/{y}.png”替换为“http://a.tile.osm.org/{z}/{x}/{y}.png"”，它可以工作...但不要认为它应该以这种方式工作...但这是一个不同的问题...

【讨论】：