javascript - 铁路之路 : Send client data to controller using turbolinks

标签 javascript ruby-on-rails ruby ruby-on-rails-4 turbolinks

使用turbolinks时,通过简单的点击事件将数据发送到 Controller 操作的“Rails Way”是什么?

我的页面有两个链接:一个指向 /food,另一个指向 /drinks。我的目标是将一些位置数据(通过geolocation api)发送到 Controller ,然后在处理该位置数据后呈现适当的 View 。

将用户导航到适当路径并随请求发送数据的阻力最小的路径是什么?

是否应该将每个按钮包装在表单中并发送发布请求?

我应该劫持/关闭 Turbolinks 并自行管理渲染吗?如果我只是通过点击事件上的 XHR 发送数据, Controller 会收到 2 个请求:一个来自 Turbolinks,另一个来 self 的处理程序,这是不可取的。

这是一些代码:

app/controllers/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

app/views/drinks/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)
 })()

最佳答案

例如,您可以 opt-out你的按钮,这将阻止你的按钮使用涡轮链接。

或者你可以听 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 但将地理位置作为查询字符串提供给您的 Controller ,您可以这样做 link_to "something", something_path(lat: <geolat>, lng: <geolng>) 然后使用 params[:lat] 访问 lat、lng , params[:lng]

关于javascript - 铁路之路 : Send client data to controller using turbolinks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22989814/

相关文章:

ruby-on-rails - 没有路由匹配 { :controller= >"stocks", :action= >"create"} RSpec Rails 3

javascript - 热线 : How to render two partials for a broadcasted object on to two different pages?

ruby - 是否可以根据单个对象对方法的响应对对象列表进行排序?

ruby - 创建一个自动化的 github 问题

javascript - 如何使用事件委托(delegate)?

javascript - 在 Javascript 中翻译 Bro_Log 时间戳

javascript - 如何使用纯 JavaScript 淡入 React 组件?

javascript - 无法从事件处理程序 "this"对象获取属性

css - 画一个圆圈,里面放个人资料照片

ruby - 我以错误的方式解决了 Project Euler #15。为什么这样做?