动态嵌套属性表单的 Rails 和 Stimulus

如何解决动态嵌套属性表单的 Rails 和 Stimulus

在那里，在多年仅将 Rails 用于 API 之后，我又回到了 Rails。有各种各样的新东西，我正试图弄清楚如何用新框架完成一些事情。一个示例是使用 accept_nested_attributes 创建表单并添加动态 has_many 关联。

我有 Company 模型和 Partner 模型。

class Company < ApplicationRecord
  # ... name,size,registration_type,etc
  has_many :partners,dependent: :destroy
  accepted_nested_attributes_for :partners
end

class Partner < ApplicationRecord
  # ... name,email,phone
  belong_to :company
end

在我的表单中，我有：

<%= form_with(model: company) do |form} %>
  <!-- ... -->

  <div class="hidden" data-company-form-target="partnersForm">
    <%= form.fields_for :partners,company.partners do |partner_form| %>
      <div data-company-form-target="partnerFormInner">
        <div class="form-group">
          <div>
            <%= partner_form.label :name,"Name" %>
            <%= partner_form.text_field :name %>
          </div>

          <div>
            <%= partner_form.label :email,"Email" %>
            <%= partner_form.text_field :email %>
          </div>

          <div>
            <%= partner_form.label :phone_number,"Phone Number" %>
            <%= partner_form.text_field :phone_number %>
          </div>
        </div>
      </div>
    <% end %>
    <div>
      <button data-action="click->company-form#addPartner">
        +
      </button>
    </div>
  </div>
<% end %>

我有一个 js 控制器，它使用按钮向表单添加新行以添加更多合作伙伴：

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [ "partnerFormInner" ]

  addPartner(e) {
    e.preventDefault(); e.stopPropagation();

    this.partnerFormInnerTarget.insertAdjacentHTML('beforeend',this.formTemplate)

    this.count++
  }

  connect() {
    this.count = 1
  }

  get formTemplate() {
    return `<div>
    <div>
      <label for="company_partners_attributes_${this.count}_name">Name</label>
      <input type="text" name="company[partners_attributes][${this.count}][name]" id="company_partners_attributes_${this.count}_name">
    </div>

    <div>
      <label for="company_partners_attributes_${this.count}_email">Email</label>
      <input type="text" email="company[partners_attributes][${this.count}][email]" id="company_partners_attributes_${this.count}_email">
    </div>

    <div>
      <label for="company_partners_attributes_${this.count}_phone_number">Phone Number</label>
      <input type="text" phone_number="company[partners_attributes][${this.count}][phone_number]" id="company_partners_attributes_${this.count}_phone_number">
    </div>
  </div>`
  }
}

现在一切正常，但是我觉得 js 控制器有点笨拙，从单个合作伙伴复制 HTML 输出并将其粘贴到我的控制器中，并带有一些插值......我觉得可能有一些方法可以我直接从 Rails 后端获取该模板，以便我将其全部定义在某个地方的某个部分或某处，但我不确定如何连接这些点。

有没有办法将合作伙伴表单移动到表单中下一行的部分和动态提取代码并通过JS插入它，或者我是否需要继续做我正在做的复制/粘贴?