Ruby on Rails：Selectize.js与Cocoon
我正在尝试在Ruby on Rails中创建一个表单来选择构造的一部分。 新的字段（部分条目 – 连接表）由Cocoon gem添加。 一切正常，但在尝试编辑保存的结构时，Selectize无法读取其当前部分的字段。
这是我的_part_fields.html.erb：
"Select or create a part..."}, {class => "construction_part_select"} %> 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);
我怎样才能使这个工作？
提前致谢。
我通过在我的选择标记（’to_select’）中添加特殊参数来解决它，因为推荐的’data-data’（ https://github.com/brianreavis/selectize.js/issues/231 ）应该会自动选择当前值似乎不适合我的情况。
_part_fields.html.erb：
<%= 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 %>
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);