Gem 用法：cocoon + selectize-rails答案

【问题标题】：Gem usage: cocoon + selectize-railsGem 用法：cocoon + selectize-rails
【发布时间】：2016-06-09 00:38:37
【问题描述】：

我无法让selectize-rails 与cocoon 一起工作。（当添加 +1 出勤选择时，它不会被激活）。我看到this 的问题，但它没有给我带来任何结果。

我有什么：

- Attendance model
- Event model
- Event has_many :attendances

我的js：

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

事件/_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

有什么想法吗？请帮忙

【问题讨论】：

您需要使用回调，如您链接的答案所示。你试过了吗？
我真的是编程新手，还不太了解 .js.. 能否请您给我一个提示，告诉我该做什么/要看什么？

标签： ruby-on-rails ruby cocoon-gem selectize.js

【解决方案1】：

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

所以你可以这样做：

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

这意味着：每当在表单的某个地方引发茧事件时，我们将应用.selectize 代码。

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

【讨论】：

效果很好。谢谢你，内森！