我有这个表单调用datepicker：
... <%= f.input :expiration_date,as: :datepicker,required: false %> ...
Simple_form包装：
应用程序/输入/ 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事件)加载时,生成以下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功能来实现它.
解决方法
我终于找到了一个合适的修复：
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,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>
