在 ruby​​ on rails 5 应用程序中使用带有 Materialize Css 和简单表单的 cocoon Gem 时的 Datepicker 问题

Question

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

在 materialize-form gem notes 中，它提供了使用嵌套表单 gem 使用嵌套表单的解决方案（仅在 Rails 3 中有效）。我正在使用茧宝石代替。我遇到了这个问题，“您在嵌套字段中有一个日期输入，并且您想为其使用 jQuery datepicker。这有点棘手，因为您必须在插入字段后激活 datepicker。”

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

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

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

它从nested_form gem 代码中监听nested:fieldAdded 事件。有谁知道我在使用茧宝石时如何找到我需要听的事件？为了在我创建一个新的嵌套字段时重新加载 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

如果您指的是在插入/删除项目时调用的事件，那么以下内容可能会有所帮助。查看 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) {

}