javascript - 有没有办法重新生成 link_to_add_association(特别是数据关联插入模板)？

Question

构建了一个非常基本的 Rails 应用程序来使用 Cocoon 操作嵌套属性，添加和删除链接效果很好。但是，没过多久我就想更改所插入内容的基础内容，比如响应另一个字段更改包含的选择标记中的选项值列表。似乎要添加的内容包含在“a”标签数据元素(数据关联插入模板)中。我可以很容易地通过 jQuery 更改所有包含行的选择选项，但更改 link_to_add_association 的行为超出了我的范围。

以下是我的示例的片段:

_form.html.erb

  <div>
    <strong>Entries:</strong>
    <div id="entries" style="border: thin solid">
      <%= f.fields_for :entries do |oi| %>
        <%= render "entry_fields", f: oi %>
      <% end %>
      <div class="links">
        <%= link_to_add_association 'Add Entry', f, :entries, {id: 'cocoon-add-entry'} %>
      </div>
    </div>
  </div>

_entry_fields.html.erb

<div class="nested-fields">
  <%= f.label :item_id %>
  <%= f.select :item_id, @items.collect {|i| [i.style, i.id]}, {include_blank: true}, {selected: :item_id, multiple: false} %>

  <%= f.label :decoration_id, 'Decoration' %>
  <%= f.select :decoration_id, @decorations.collect { |d| [ d.name, d.id ] }, {include_blank: true}, {selected: :decoration_id, multiple: false, class: 'decoration'} %>

  <%= f.label :color %>
  <%= f.text_field :color %>

  <%= f.label :size_id %>
  <%= f.select :size_id, @sizes.collect { |s| [ s.name, s.id ] }, {include_blank: true}, {selected: :size_id, multiple: false} %>

  <%= f.label :number %>
  <%= f.number_field :number, value: 1, min: 1 %>

  <%= f.check_box :_destroy, hidden: true %>

  <%= link_to_remove_association "Remove Entry", f %>
</div>

订单.咖啡

ready = ->
  $('.customer').change ->
    $.ajax
      url: '/orders/change_customer'
      data: { customer_id : @value }

$(document).ready(ready)
$(document).on('turbolinks:load', ready)

订单 Controller .rb

  def change_customer
    @decorations = Decoration.joins(:logo).where('logos.customer_id = ?', params[:customer_id])
    respond_to do |format|
      format.js
    end
  end

change_customer.js.erb

// update all existing entry decorations with new customer driven options
<% new_decor = options_from_collection_for_select(@decorations, :id, :name) %>
var new_decor_options = "<option value='' selected='selected'></option>" + "<%=j new_decor %>";
$('.decoration').html(new_decor_options);

// now need to change $('#cocoon-add-entry').attr('data-association-insertion-template, ???);
// or regenerate link entirely - but don't have required data to do so here (form builder from original)

我试图通过 js str.replace 直接操作模板数据字符串，但这是一个丑陋的正则表达式，因为 unescapeHTML 和 htmlsafe 操作首先使它成为一个属性。而且，这种方法对我来说并不好闻。我一直在慢慢研究 cocoon view_helpers 和 javascript，但似乎没有什么合适的，或者我似乎没有正确的方法/数据值来构建替换链接。有什么建议吗？

顺便说一句，茧 gem 的荣誉。

Answer 1

经过多次咬牙切齿，我拼凑出了一个可能的解决方案。由于限制，我还没有决定是否将其投入生产，但由于结合了几个不同的 SO 问题和答案，以下工作:

change_customer.js.erb

// update all existing entry decorations with new customer driven options
<% new_decor = options_from_collection_for_select(@decorations, :id, :name) %>
var new_decor_options = "<option value='' selected='selected'></option>" + "<%=j new_decor %>";
$('.decoration').html(new_decor_options);

// update the Add Entry link to capture new decorations set.
// Note use of ugly hack to recreate 'similar' form.
// Also note that this will only work for new order; will have to revise for edit.
'<%= form_for(Order.new) do |ff| %>'
$('#cocoon-add-entry').replaceWith("<%=j render partial: 'add_entry_link', locals: {f: ff} %>");
'<% end %>'

_add_entry_link.html.erb

<%= link_to_add_association 'Add Entry', f, :entries, {id: 'cocoon-add-entry', data: {'association-insertion-method' => 'after'}} %>