Gem 用法：cocoon + selectize-rails

Question

我无法让 selectize-rails 与 cocoon 一起工作。（当添加 +1 出勤选择时，它不处于活动状态）。我看到了 this 个问题，但没有找到答案。

我有：

- Attendance model
- Event model
- Event has_many :attendances

我的 js:

$(document).ready(function(){
    if ($('.selectize')){
        $('.selectize').selectize({
            sortField: 'text'
        });
    }
});

Events/_form:

= simple_form_for @event do |f|
   = f.button :submit, class: "btn btn-success add-button"
   = f.input :starts_at, :minute_step => 15
  #tasks
    = f.simple_fields_for :attendances do |attendance|
      = render 'attendance_fields', f: attendance
    .links
      %p
      = link_to_add_association 'Add attendance', f, :attendances

_Attendance_fields:

.nested-fields
  = f.select :guest_id, Guest.all.map{|c| [c, c.id]}, {},class: 'selectize'
  = link_to_remove_association "Remove attendance", f

有什么想法吗？请帮助

Answer 1

因此您的代码在页面上选择 class .selectize 项，然后在它们上调用 selectize 函数。但是，此调用仅在页面初始加载时运行。当新项目动态添加到页面时，您将不得不再次这样做。 Cocoon 引发事件，您可以收听这些事件，当它们发生时，您会得到插入的 html 片段。

所以你可以这样做：

$('form').on('cocoon:after-insert', function(e, addedItem) {
  $(addedItem).find('.selectize').selectize({
    sortField: 'text'
  })
});

这意味着：每次在表单中的某处引发 cocoon 事件时，我们将应用 .selectize 代码。

可以在 documentation 中找到更多示例和信息。

Gem 用法：cocoon + selectize-rails

Gem usage: cocoon + selectize-rails

ruby

ruby-on-rails

selectize.js

cocoon-gem