The Rails Way：使用turbolinks將客戶端數據發送到控制器

Question

使用turbolink時，什麼是「Rails方式」將數據發送到控制器上的簡單點擊事件動作？

我有一個頁面有兩個鏈接：一個指向/food，另一個指向/drinks。我的目標是將一些位置數據（通過geolocation api）發送到控制器，然後在處理該位置數據後渲染適當的視圖。

阻力最小的路徑是什麼，將用戶導航到適當的路徑並將數據與請求一起發送？

應該將每個按鈕封裝在一個表單中併發送一個請求？

我應該劫持/關閉Turbolink並自行管理渲染嗎？如果我只是通過點擊事件通過XHR發送數據，控制器會得到請求：一個來自Turbolinks，另一個來自我的處理程序，這是不可取的。

下面是一些代碼：

應用程序/控制器/ drinks_controller.rb

class DrinksController < ApplicationController 
    def index 
    # Ideally, I would like to check for POST or GET data here 
    # and send as a parameter to get_a_venue 

    @venue = get_a_venue(:drinks) 
    end 
end 

應用/視圖/飲料/ index.html.erb

<% provide(:title, @venue[:name]) %> 

<!-- body content --> 

<div class="row buttons"> 
    <div class="small-12 medium-6 columns"> 
     <h3> 
      <%= link_to 'Try Another One', drinks_path, class: "button expand radius choice" %> 
     </h3> 
    </div> 
    <div class="small-12 medium-6 columns"> 
     <h3> 
      <%= link_to "I Want Some Food Instead", food_index_path, class: "button expand radius choice" %> 
     </h3> 
    </div> 
</div> 

app/assets/javascripts/handlers.js

$(function() { 
    // success callback sets an in scope variable to the location coordinates 
    navigator.geolocation.getCurrentPosition(success, error, options) 

    document.addEventListener('click', function(e) { 
     if (e.currentTarget.nodeName === 'A' && 
      e.currentTarget.classList.contains('choice') { 

      // send data via ajax here? 
     } 
    }, false) 
})() 

Answer 1

你可以爲例如opt-out你的按鈕，這將阻止你的按鈕使用turbolinks。

或者你可以聽page:before-change事件，執行你的AJAX請求並返回false。這將取消turbolink請求。 Source

因此，像：

document.addEventListener('page:before-change', function(e) { 
    if (e.currentTarget.nodeName === 'A' && 
     e.currentTarget.classList.contains('choice') { 
    // do stuff 
    } 
    return false; 
}, false) 

如果你想使用turbolinks，但提供的地理位置作爲查詢字符串到控制器，你可以做link_to "something", something_path(lat: <geolat>, lng: <geolng>) ，然後訪問緯度，經度與params[:lat]，params[:lng]