在 rails 5 应用程序上将 Cocoon Gem 与 Materialize Css 和 ruby 中的简单表单一起使用时出现日期选择器问题

Question

我在我的 Rails 应用程序中使用 Cocoon gem 作为嵌套表单。我将它与 materialize-form gem 一起使用，这使我可以将 materialize css 与简单形式一起使用。

在 materialize-form gem 注释中，它给出了使用嵌套形式 gem 的嵌套形式的解决方案（仅适用于 Rails 3）。我正在使用 cocooon gem 代替。我遇到这个问题 "you have a date input in a nested field and you want to use jQuery datepicker for it. This is a bit tricky, because you have to activate datepicker after field was inserted."

完整描述位于此处的 Javascript 事件部分。 https://github.com/ryanb/nested_form

我相信解决方案是使用此代码。

$(document).on('nested:fieldAdded', function(event){
  window.materializeForm.init()
})

它从 nested_form gem 代码中侦听 nested:fieldAdded 事件。有谁知道在使用 cocoon gem 时如何找到我需要监听的事件？为了在我创建新的嵌套字段时重新加载 materializeForm，以便它选择日期选择器。

如果需要，我可以在 heroku 中设置一个示例应用程序，该示例不清楚，但当 cocoon gem 添加新的嵌套字段时，它基本上不会重新运行实体化表单。

任何帮助将不胜感激。谢谢。

添加我的 Html 代码 >>>

// _form.html.erb 文件

   <h3>Dates</h3>
    <div id="schedules">
            <%= f.simple_fields_for :schedules do |schedule| %>
                <%= render 'schedule_fields', f: schedule %>
            <% end %>
            <div class="links">
                <%= link_to_add_association 'Add Schedule', f, :schedules %>
      </div>
    </div>

// _schedule_fields.html.erb 文件

<div class="nested-fields">
  <%= f.input :event_schedule, label_html: { class: "active"}, wrapper_html: { class: 'col m12 s12 ' }, class: "datepicker" %>
  <%= link_to_remove_association "Remove Schedule", f %>
</div>

* 使嵌套字段与回调一起工作的解决方案代码 *

$(document).on('cocoon:after-insert', (function(event) {
    window.materializeForm.init() 
}));

Answer 1

如果您指的是在 insertion/removal 项上调用的事件，那么以下内容可能会有所帮助。查看 Cocoon 的官方 Github 存储库（搜索回调）以获取更多信息。 https://github.com/nathanvda/cocoon

// A callback for cocoon so whenever a new association is made; the below will be executed.
$(document).on('cocoon:after-insert', (function(event) {

}

在 rails 5 应用程序上将 Cocoon Gem 与 Materialize Css 和 ruby 中的简单表单一起使用时出现日期选择器问题

Datepicker issue when using cocoon Gem with Materialise Css and simple form in ruby on rails 5 app

javascript

jquery

ruby-on-rails

cocoon-gem