Ruby on Rails中jQuery Timepicker Ajax函数如何访问@tour变量

看起来你遇到的核心问题是后端的@tour变量无法直接被前端JS/Ajax访问——因为@tour是服务器端的实例对象，前端代码运行在浏览器里，根本不知道这个变量的存在，所以直接在JS里引用会报错“tour不存在”。下面给你两种最常用的解决思路：

方法一：直接在视图中注入后端变量（最简单，适合静态场景） #

如果你的@tour是页面加载时就已经从控制器传递过来的，不需要动态刷新，那直接在视图的<script>标签里把@tour的时间数据转成前端能识别的JS变量就行。

假设你用的是Rails ERB模板（从@tour的写法推测大概率是），可以这么写：

<script>
// 把后端@tour的时间转成小时数，注入到全局JS变量里
window.tourTimeRange = {
  startHour: <%= @tour.start_date.hour %>,
  endHour: <%= @tour.end_date.hour %>
};

// 初始化timepicker时直接用这个变量
$(function() {
  $('#your-timepicker-element').timepicker({
    hourMin: tourTimeRange.startHour,
    hourMax: tourTimeRange.endHour,
    // 其他timepicker配置...
  });
});
</script>

这样前端JS就能直接拿到后端传递的小时数，不会再出现变量不存在的错误。如果需要处理分钟或者完整时间戳，可以把.hour换成.min获取分钟，或者用.to_i获取时间戳、.iso8601转成标准时间字符串。

方法二：用Ajax动态获取（适合需要异步加载的场景） #

如果你的@tour是后续动态生成的（比如用户选择某个 tour 后才加载），那需要后端提供一个接口返回该tour的时间数据，前端通过Ajax请求获取：

1. 后端添加路由和接口 #

在routes.rb里加一个接口路由：

get '/tours/:id/time_range', to: 'tours#time_range'

然后在tours_controller.rb里实现接口方法：

def time_range
  @tour = Tour.find(params[:id])
  # 返回JSON格式的时间数据
  render json: {
    start_hour: @tour.start_date.hour,
    end_hour: @tour.end_date.hour
    // 如果需要分钟可以加上start_min: @tour.start_date.min等
  }
end

2. 前端Ajax请求并初始化timepicker #

// 假设你已经拿到了tour的ID（可以从DOM元素的data属性获取，比如<div data-tour-id="<%= @tour.id %>">）
const tourId = $('#selected-tour').data('tour-id');

$.get(`/tours/${tourId}/time_range`, function(response) {
  // 请求成功后初始化timepicker
  $('#your-timepicker-element').timepicker({
    hourMin: response.start_hour,
    hourMax: response.end_hour,
    // 其他配置...
  });
})
.fail(function() {
  console.error('获取tour时间范围失败');
});

关键注意点 #

• 时区问题：如果你的start_date/end_date存储的是UTC时间，记得转成用户本地时区的小时数，避免出现时间偏移。比如在Rails里可以用@tour.start_date.in_time_zone.hour。
• 变量作用域：如果不想用全局变量（window.tourTimeRange），可以把变量包裹在IIFE（立即执行函数）里，避免污染全局作用域。

内容的提问来源于stack exchange，提问作者Stella Han