使用 Gon Gem 的 JQuery Object Literal 中的 Rails 多维数组

Question

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

这是将 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>

我试过了

application.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: [....]”）是如何调用的，因此我可以更好地搜索 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 之类的内容开始，然后继续阅读一本关于javascript 的好书（我还没有找到，对此非常感谢cmets）。然后去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>