Rails JQuery 对象文字中的多维数组使用 Gon Gem

Question

我对 JS 和 Jquery 很陌生。我正在构建一个调度应用程序。我将约会存储在一个名为 "Event" 的模型中。我正在使用一个助手从用户可能预约的给定日期的名为 "event.time_start" 和 "event.time_end" 的列中的值构建多维数组。当用户从下拉菜单中选择 start_time 和 end_time 时，已经有约会的时间将显示为灰色/"disabled"。我使用 http://jonthornton.github.io/jquery-timepicker/ 的 jquery.timepicker 和 rails 来阻止给定时间对数组（[上午 8 点，下午 6 点]，[下午 1 点，下午 2 点]）中的某些时间值。
我正在使用变量 @other_events 查找给定日期的 "other" 事件（通知采取哪些时间的事件）。

这是配对 event.start_time 和 event.end_time
的助手 events_helper.erb

module EventsHelper

    def taken_times(other_events)
      other_events.map { |event| [event.time_start, event.time_end] }
      @taken_times = taken_times(other_events)
    end
end

我可以让数组在视图中像这样工作：

<% taken_times(@other_events).each do |taken_time| %>
  <%= taken_time.first.strftime("%l:%M %P")%>
  <%= taken_time.last.strftime("%l:%M %P")%>,
 <% end %>

但我无法让它在 JS 中工作。我现在正在尝试使用 Gon Gem 我需要输出的是：

events/show.html.erb 查看

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            'disableTimeRanges':   [
      // start dynamic array
    ['10:00am', '10:15am'],
    ['1:00pm', '2:15pm'],
    ['5:00pm', '5:15pm']
]
      //end dynamic array
     });
        $('#jqueryExample').datepair();
        </script>

所以我试过了

申请.html.erb

  <%= Gon::Base.render_data({}) %>

events_controller.erb

def show
 @event = Event.new
 @other_events = Event.where(date_id: params[:id])
 gon.taken_times = @taken_times
end

与 JS

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            'disableTimeRanges':   [
      // start dynamic array
     gon.taken_times
      //end dynamic array
     });
        $('#jqueryExample').datepair();
        </script>

但这不起作用。它只是杀死了文本字段的下拉功能。我很想知道这些逗号分隔的对象（如“'timeFormat': 'g:ia'”和 "disableTimeRanges: [....]" 的名称，以便我可以更好地搜索 SO 以获取 javascript 答案。我对 JS & JQuery.

很陌生

Answer 1

Gon 似乎是处理此问题的正确方法，但您的代码中存在各种错误：

你在哪里写<%= Gon::Base.render_data({}) %>？它应该在 <head> 标签中，在任何 javascript 代码

之前

你的event_helper.rb是错误的：

def taken_times(other_events)
  # Map returns a **copy**, if you don't assign it to anything, it's just lost
  other_events.map { |event| [event.time_start, event.time_end] }
  # This has **completely no sense**, this method will throw a stack level too deep error **every time you call it**, you should read a book about programming before trying to use rails
  @taken_times = taken_times(other_events)
end

如果你想使用它，请使用类似

的东西

def taken_times(other_events)
  other_events.map { |event| [event.time_start, event.time_end] }
end

控制器和之前的代码有同样的问题

def show
 @event = Event.new
 @other_events = Event.where(date_id: params[:id])
 # @taken_times is not assigned, gon.taken_times will always be `null` in JS
 gon.taken_times = @taken_times
end

你应该重写它：

helper :taken_times
def show
 @event = Event.new
 @other_events = Event.where(date_id: params[:id])
 gon.taken_times = taken_times(@other_events)
end

最后，您的 javascript 代码中有一个很大的语法错误，这就是一切都消失的原因。如果它很特别，你也会使用 gon。 Gon 只是创建了一个普通的 javascript 对象 ，您可以像访问其他任何东西一样在 javascript 中访问它。

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            // Here you have an opening square brackets, which is never closed
            // Also, there is no point in having a square brackets here or you'll have an array of array of array, while you want an array of array
            'disableTimeRanges':   [
      // start dynamic array
     gon.taken_times
      //end dynamic array
     });
        $('#jqueryExample').datepair();
        </script>

应该是

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            'disableTimeRanges': gon.taken_times
     });
        $('#jqueryExample').datepair();
        </script>

我的主要建议是，先读一本Ruby书，而不是Ruby和Rails合并的书，你显然需要在做任何事情之前提高你的编程技能。从类似 The Well Grounded Rubyist and follow up with a good book about javascript (which I have yet to find, comments about it are well appreciated). Then go for Rails 4 in Action 的内容开始，此时您可能会更好地理解正在发生的事情。

This is my recipe to become a good rails developer

Answer 2

非常感谢 Fire-Dragon-Dol。我不得不再做一些调整……我不得不更改助手并添加 strftime 以使其工作。我还必须以不同的方式调用助手......以防万一有人想看工作代码：

module EventsHelper
def taken_times(other_events)
  other_events.map { |event| [event.time_start.strftime("%l:%M %P"), event.time_end.strftime("%l:%M %P")] }
end
end

events_controller.rb

include EventsHelper

def show
 @event = Event.new
 @other_events = Event.where(date_id: params[:id])
 gon.taken_times = taken_times(@other_events)
show

风景

  <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
    'disableTimeRanges':   
      // start dynamic array
    gon.taken_times
              // end dynamic array
 });
        $('#jqueryExample').datepair();
        </script>

Rails JQuery 对象文字中的多维数组使用 Gon Gem

Rails multi-dimensional array in JQuery Object Literal using Gon Gem

arrays

jquery

ruby-on-rails

jquery-ui-timepicker

ruby-on-rails-4