2014-04-10 21 views
0

使用turbolink時,什麼是「Rails方式」將數據發送到控制器上的簡單點擊事件動作?The Rails Way:使用turbolinks將客戶端數據發送到控制器

我有一個頁面有兩個鏈接:一個指向/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) 
})() 

回答

2

你可以爲例如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]

+0

涼。所以你認爲最好的方法是避免使用Turbolinks並使用'render'或'redirect_to'處理控制器中的頁面變化? –

+0

當然,或者如果你想保持turbolinks活躍,用'link_to'。查看更新的答案。 – drowzy

+0

我最終發送了一個POST請求,而不是單擊鏈接。因此,用戶到達,然後我們獲得地理數據,並將其發送到控制器方法,該方法將數據保存爲會話變量。仍然可以使用turbolink並且數據在頁面之間持續存在。 –

相關問題