Ruby on Rails：Selectize.js 和 Cocoon

Question

我正在尝试在 Ruby on Rails 中制作一个表单来选择部分构造。 Cocoon gem 添加了新字段（部分条目 - 连接表）。一切正常，但在尝试编辑保存的结构时，Selectize 无法读取其当前部分的字段。

这是我的 _part_fields.html.erb：

<li class="control-group nested-fields">
  <div class="controls">
    <%= f.input :quantity %>
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {class => "construction_part_select"} %>

    <%= link_to_remove_association "remove", f %>
  </div>
</li>

application.js：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require selectize
//= require bootstrap
//= require bootstrap-sprockets
//= require cocoon
//= require_tree .

jQuery(function () {
    console.log("jQuery");
    $("#construction_part_select").each(function () {
        console.log("iter1");
        $(this).selectize({
            create: true,
            sortField: "text"
        });
    });
});

var selectizeParts;
selectizeParts = function () {
    console.log("selectizeParts");
    $("#construction_part_select").each(function () {
        console.log("iter2");
        $(this).selectize({
            create: true,
            sortField: "text"
        });
    });
};

$(document).ready(function () {
    selectizeParts();

    $('#construction_parts').bind('cocoon:after-insert',
        function (e, inserted_item) {
            item = inserted_item.find('.construction_part_id');
            item.selectize({
                create: true,
                sortField: "text"
            });
        })
});
$(document).on("page:load", selectizeParts);

我怎样才能让它工作？

提前致谢。

Answer 1

我通过在我的选择标签 ('to_select') 中添加特殊参数来解决它，因为推荐的 'data-data' (https://github.com/brianreavis/selectize.js/issues/231) 应该自动选择当前值似乎不适用于我的情况。

_part_fields.html.erb：

<li class="control-group nested-fields">
  <div class="controls">
    <%= f.input :quantity %>
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {:class => "construction_part_select", :to_select => f.object.part.id} %>

    <%= link_to_remove_association "remove", f %>
  </div>
</li>

application.js：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require selectize
//= require bootstrap
//= require bootstrap-sprockets
//= require cocoon
//= require_tree .

jQuery(function () {
    console.log("jQuery");
    $("#construction_part_select").each(function () {
        console.log("iter1");
        var $selectized;
        $selectized = $(this).selectize({
            create: true,
            sortField: "text"
        });
        // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231)
        // get(0) returns DOM object on which we can invoke getAttribute()
        $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select"));
    });
});

var selectizeParts;
selectizeParts = function () {
    console.log("selectizeParts");
    $("#construction_part_select").each(function () {
        console.log("iter2");
        var $selectized;
        $selectized = $(this).selectize({
            create: true,
            sortField: "text"
        });
        // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231)
        // get(0) returns DOM object on which we can invoke getAttribute()
        $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select"));
    });
};

$(document).ready(function () {
    selectizeParts();

    $('#construction_parts').bind('cocoon:after-insert',
        function (e, inserted_item) {
            item = inserted_item.find('.construction_part_id');
            item.selectize({
                create: true,
                sortField: "text"
            });
        })
});
$(document).on("page:load", selectizeParts);