Question

我对JS＆amp; amp; jQuery的。我正在构建一个调度应用程序。我将约会存储在名为＆＃34; Event＆＃34;的模型中。我正在使用帮助器从名为＆＃34; event.time_start＆＃34;的列中的值构建多维数组。和＆＃34; event.time_end＆＃34;对于某一天，用户可以预约。当用户从下拉菜单中选择start_time和end_time时，已经有约会的时间将变灰/＆＃34;禁用＆＃34;。我正在使用带有rails的http://jonthornton.github.io/jquery-timepicker/的jquery.timepicker来阻止给定时间对数组中的某些时间值（[8am，6pm]，[1pm，2pm]）。
我找到了＆＃34;其他＆＃34;使用变量@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 view

 <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>

但这不起作用。它只会杀死文本字段的下拉功能。我很想知道这些逗号分隔的对象是什么样的＆＃34;＆＃39; timeFormat＆＃39;：＆＃39; g：ia＆＃39;，＆＃34;和＆＃34; disableTimeRanges：[....]＆＃34;被称为所以我可以更好地搜索SO的javascript答案。我对JS＆amp; amp; 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的好书（我还没有找到，对它的评论很受欢迎）。然后去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>

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

2 个答案: