Rails 4，turbolinks和coffeescript

Question

如果我有點困惑，請原諒我，我冒險進入編程的新領域，並隨時學習。我正在努力的基本概念：

在我的Rails 4應用程序中，我使用了Leaflet（一個用於映射的JS庫）並調用了一些我自己的代碼。長話短說，我無法獲得傳單和Turbolinks一起打好，因此我的網站上的頁面需要傳單我已禁用Turbolinks，另外我正在加載頁面特定的Coffeescript。

我現在已經決定要添加一個後退按鈕。用法將如下圖所示 - 從使用Leaflet的頁面中，用戶可以點擊地圖的一部分並將其帶到使用Turbolinks的頁面（如果有的話）。從Turbolinks頁面，我有一個後退按鈕可以將您帶回到Leaflet地圖。

但是，當我回到Leaflet頁面時，我的coffeescript要麼沒有運行，要麼正在錯誤的時間運行（我得到了幾次運行不到的錯誤）。我猜我需要在Coffeescript的開頭添加另一個事件，或者選擇一個不同的事件，但我不確定它應該是什麼。

如果您有關於如何使其工作的建議，並且它有助於獲得後退按鈕的工作，我絕不會在傳單頁面上不使用Turbolinks。 :)

_navbar.html.erb

<li><%= link_to("By grid", grid_path, data: {turbolinks: false}) %></li> 

grid.html.erb

... code for layout goes here ... 
<% content_for :header do %> 
    <%= javascript_include_tag "leaflet" %> 
<% end %> 
<% content_for :javascript do %> 
    <%= javascript_include_tag "leaflet-maps/#{filename}" %> 
<% end %> 

leaflet-maps/grid.coffee

$ -> 
    document.addEventListener 'page:restore', -> 
    app.init() 
    return 
... rest of coffeescript goes here ... 
... here is how the link is getting called 
    layer.on 'click', (e) -> 
    window.location.href='/show?grid='+feature.id 
    return 

show.html.erb

<%= link_to "Back", :back %> 

更新

grid.coffee - 全CoffeeScript的代碼

ready = -> 
#-------------------------------------------------- 
# Build tooltip with plant name 
#-------------------------------------------------- 
    onEachFeature = (feature, layer) -> 
    if feature.properties and feature.properties.grid_name 
     layer.bindTooltip feature.properties.grid_name 
     layer.on 'click', (e) -> 
     window.location.href='/show?grid='+feature.id 
     return 
    return 

#-------------------------------------------------- 
# Variables 
#-------------------------------------------------- 
    L.Icon.Default.imagePath = '/assets' 
    gridStyle = { 
    "color": "#ff7800", 
    } 
    neCorner = L.latLng([47.635103, -122.320525]) 
    swCorner = L.latLng([47.634083, -122.321129]) 


#-------------------------------------------------- 
# Set view and load Google Maps 
#-------------------------------------------------- 
    map = L.map("map", zoomSnap: .25) 
    map.fitBounds([swCorner, neCorner]) 
    map.invalidateSize(false) 
    map.options.maxZoom = 22 
    map.options.bounceAtZoomLimits = true 
    googleLayer = L.gridLayer.googleMutant(type: 'roadmap').addTo(map) 
    map.addLayer googleLayer 

#-------------------------------------------------- 
# Get Ajax data 
#-------------------------------------------------- 
    $.ajax 
    dataType: 'text' 
    url: 'grid.json' 
    success: (data) -> 
     L.geoJSON(JSON.parse(data), style: gridStyle, onEachFeature: onEachFeature).addTo map 
    error: -> 
     alert "Failed to load AJAX data" 

document.addEventListener 'turbolinks:load', ready() 
document.addEventListener 'DOMContentLoaded', ready() 

Answer 1

所以，有兩個地方，你可能會偏離軌道。第一個是在這裏：

$ -> 
    document.addEventListener 'page:restore', -> 
    app.init() 

這是什麼意思是......「當網頁發出DOMContentLoaded事件，那麼，當別的東西發出page:restore事件，那麼，運行我的JavaScript代碼。」

讓我們從DOMContentLoaded開始。這是默認情況下瀏覽器發出的事件，以及jQuery框架用來觸發事件偵聽器的事件。 You can read more about jQuery's .ready() function here。

的page:restore事件不是標準地發射事件，但a custom event used in Turbolinks Classic（< 5.0版本，不贊成2016年2月），這我相信，因爲你提到的Rails 4

無論哪種方式，您正在使用，將兩個聽衆堆疊在一起可能不是你想要做的。你可以做什麼定義一個功能在ready和page:restore上運行...

function ready() { 
    // All of the setup you want to do... 
} 

document.addEventListener("turbolinks:load", ready()); 
document.addEventListener("DOMContentLoaded", ready()); 

（對不起，我知道你在寫CoffeeScript的。那不是我的果醬。我希望我的JavaScript是OK ...）

這是一個。我看到了另一個改進的機會。

layer.on 'click', (e) -> 

什麼你說的是「被加載文檔時，監聽layer對象上點擊，然後再去做這件事情。」

我不完全確定layer是什麼，如果它是Leaflet特定的，我可能無法幫助您。但是，實際上有一種更有彈性的方式來寫這個。

$(document).on("click","layer", function() { 
    // do things with the layer 
}); 

這似乎是相同的，但是有一個細微的差別。它說：「任何時候我點擊文檔，如果我也恰好點擊一層，做這件事。」

這是更具彈性的，因爲您的JavaScript行可以總是當它運行時找到document。如果您的layer在該行代碼運行時沒有呈現，它將永遠不會捕獲這些點擊。

Happy JavaScripting！ :)