Rails 4 + simple_form和jQuery UI.Datepicker无法通过turbolink工作

Question

我有这个调用datepicker的表单:

...
<%= f.input :expiration_date, as: :datepicker, required: false %>
...

Simple_form包装器: app/inputs/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base
  def input
    @builder.text_field(attribute_name, input_html_options) + \
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"})
  end
end

从头开始加载页面($(document).ready event)时,会生成以下html:

<input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" type="text">

但是,当页面加载turbolinks时(从侧面导航栏,"page:load"事件),呈现的HTML如下:

<input class="datepicker optional form-control" id="order_expiration_date" name="order[expiration_date]" type="text">

当然,我可以简单地在.html.erb或application.js文件中添加hasDatepicker类,但我想知道是否可以使用Rails功能实现它.

Answer 1

我终于找到了合适的修复:

app/inputs/datepicker_input.rb保持不变,包装器效果很好.

资产/ Java脚本/ application.js中

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.js
//= require_tree .

$(document).on("page:load ready", function(){
    $("input.datepicker").datepicker();
});

因为:datepicker输入类型将".datepicker"类添加到呈现的HTML中,只需将datepicker()绑定到该类的所有元素即可.它使用最少量的代码来完成这项工作.

指定"input.datepicker"很重要,因为".datepicker"类被添加到标签和输入标签中.

turbolinks抛出一个页面:加载事件,所以我为这两种情况添加了处理程序 - 当页面加载turbolinks时,以及从头开始加载时(窗口刷新,链接保存在收藏夹等)

现在,以下.html.erb按照我的预期呈现:

<%= f.input :expiration_date, as: :datepicker, required: false,
    :placeholder => 'Select date', input_html: {class: "form-control"},
    label: "Expiration date: " %>

输出:

<div class="control-group datepicker optional order_expiration_date">
  <label class="datepicker optional control-label" for="order_expiration_date">Expiration date: </label>
  <div class="controls">
    <input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="Select date" type="text">
    <input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden">
  </div>
</div>