将 Javascript 迁移到 CoffeeScript 并使其在页面加载时工作答案

【问题标题】：Migrate Javascript to CoffeeScript and make it work on page load将 Javascript 迁移到 CoffeeScript 并使其在页面加载时工作
【发布时间】：2016-09-19 18:45:11
【问题描述】：

我正在尝试为字段的类加载 Javascript。这是我的看法：

<%= form_for @game do |f| %>
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="form-group">
        <%= f.label :time %>
        <%= f.text_field :time, class: 'form-control form-datetime', readonly: true %>
      </div>
    </div>
  </div>
<%= f.submit(class: 'btn btn-success')%>
<% end %>

<script>
  $(".form-datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'})
</script>

我只能让 Javascript 用于页面刷新。在第一次加载时，页面控制台状态：

未捕获的类型错误：$(...).datetimepicker 不是函数

在页面重新加载时它工作正常。

我曾尝试使用文档就绪处理程序，但没有成功：

<script>
  $( document ).ready(function() {
    (".form-datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
  });
</script>

我启用了 TurboLinks，所以我尝试了这个但没有运气How TurboLinks Works：

$(document).on("page:change", function() {
  $(".form-datetime").datetimepicker({format: 'MM d, yyyy hh:iia'});
});

我还想从视图中删除这个<script> 标记并将其放置在CoffeeScript 文件中。我需要在 CoffeeScript 文件中写什么才能在第一页加载时加载这个 Javascript 函数？

【问题讨论】：

尝试包装在 document.ready 处理程序中。如果您的主脚本加载到页面下方，那么您在加载和定义插件之前调用插件
更新了，没有运气。
您在更新的代码中缺少 jQuery 印记：(".form-datetime").datetimepicker({...}); -- 不过可能是一个错字。除此之外，您能否确认函数datetimepicker 确实是函数的正确名称？
这是一个功能，因为它在我不使用文档准备并刷新页面时起作用。你是什么意思'缺少 jQuery 印记'？
$(document).ready(...) 代码中没有美元符号。看(".form-datetime")

标签： javascript jquery ruby ruby-on-rails-3 coffeescript

【解决方案1】：

CoffeeScript 是：

$(document).ready -> $(".form-datetime").datetimepicker format: 'yyyy-mm-dd hh:ii'

【讨论】：

【解决方案2】：

在您的咖啡脚本文件中，使用它来创建loadDatePicker 函数：

loadDatePicker ->
    $(".form-datetime").datetimepicker format: 'MM d, yyyy hh:iia'

这将使该功能可以从页面中使用。

在您的页面 HTML 中，使用此脚本在特定事件上加载 DatePicker：

<script type="text/javascript">
    jQuery(document).ready(loadDatePicker);

    // TurboLinks 5 events (only register if using TurboLinks 5
    jQuery(document).on('turbolinks:load', loadDatePicker);

    // TurboLinks Classic events (only register if using TurboLinks Classic
    // jQuery(document).on('page:load', loadDatePicker);
    // jQuery(document).on('page:change', loadDatePicker);
    // jQuery(document).on('page:restore', loadDatePicker);
</script>

这些事件会导致在各种 turbolinks 页面加载/更新场景下调用 loadDatePicker 方法。您可以选择添加对其他 TurboLinks 事件的支持，具体取决于您的应用程序的需要。完整的活动列表可以在TurboLinks Full List of Events 或TurboLinks Classic Events 页面上找到。

【讨论】：