红宝石在轨道上：传单轨道不加载 [英] ruby on rails: leaflet-rails not loading

问题描述

使用RoR 4.1.4我试图使用传单轨道宝石。我遵循github页面中概述的步骤，但是当我尝试加载地图时，我看到

  ReferenceError：L不是在浏览器控制台中定义
  

。这显然意味着来自gem的助手正在被加载和执行，但它无法找到 leaflet.js 文件。

然而，页面的头部分显示 /assets/leaflet.js 正在被引用，它实际上就在那里。

当我查看生成的代码时：

 < div id =map><< ; / DIV> 
< script> 
 var map = L.map（'map'）
 map.setView（[ -  54.0，6.08]，16）
 LtileLayer（'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 = 1data-turbolinks-track =true>< / script> 
 <！ - 所有其他加载的脚本 - > 
< script src =/ assets / exif.js？body = 1data-turbolinks-track =true>< / script> 
< script src =/ assets / leaflet.js？body = 1data-turbolinks-track =true>< / script> 
<！ - 一些更多的脚本 - > 
  

因此，gem在地图div下方添加了一个脚本，只有这样，由于链轮机制而所有这些，其他脚本都被加载。对我来说，这看起来很明显，脚本无法加载leaflet.js，因为它之后被引用！

所以...我是否误解了RoR如何处理宝石和JavaScript？它必须在某个时间点工作...

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

  // =需要jquery 
 // =需要jquery.ui.widget 
 
 //这里我加载了一大堆javascripts与jquery-fileupload相关，为了简洁而剪切
 // = require bootstrap.min 
 // = require bootbox.min 
 // = require bootstrap-datepicker 
 
 // =需要exif 
 // =需要传单
 
 // =需要turbolinks 
 // = require_tree。 
  

解决方案

我在rails中遇到同样的问题。

• 传单在开发模式下运行（bower托管）
  
• 无法找到变量L 在生产模式下

以下步骤无效。

• 资产传单（Bowerfile）
  
• // =需要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/

• < link rel =stylesheethref =https://unpkg.com/leaflet@1.0.1/dist/leaflet.css/>


• < script src =https://unpkg.com/leaflet@1.0.1/dist/leaflet.js>< / script>
  

  Using RoR 4.1.4

  I am trying to use the leaflet-rails gem. I followed the steps outlined in the github page, but when I try to load the map, I see

  ReferenceError: L is not defined
  

  in the browser console. This obviously means that the helper from the gem is being loaded and executed but it can't find the leaflet.js file.

  However, the head section of the page shows that /assets/leaflet.js is being referenced and it actually IS there.

  When I look at the generated code:

      <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 -->
  

  So the gem adds a script right below the map div, and only then, due to the sprockets mechanism and all that, the other scripts are loaded. To me this looks like then obviously the script can't possibly load the leaflet.js as it's being referenced afterwards!

  So...am I misunderstanding something re how RoR handles gems and javascripts? It must have been working at some point...

  Here's my /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 .
  

  解决方案

  I faced the same issue in rails.

  • leaflet works in development mode (bower managed)
  • Can't find variable L in production mode

  The following steps did not help.

  • asset "leaflet" (Bowerfile)
  • //= 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']
  • assets precompiled and uploaded to production public/assets/...

  Am I still missing something?

  [solution]

  This issue can be resolved by using CDN assets recommended by leaflet at http://leafletjs.com/examples/quick-start/

  • <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>

  However, I would prefer to use local cached precompiled assets bundled at my app-server instead of relying on a public CDN, network bandwidths, and a lot more external things.

  这篇关于红宝石在轨道上：传单轨道不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！