0

在那里，我在多年仅将 Rails 用于 API 之后又回到了它。有各种各样的新事物，我试图弄清楚如何使用新框架完成一些事情。一个例子是创建一个带有动态关联的表单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 控制器有点 hacky，从一个合作伙伴复制 HTML 输出并将其粘贴到我的控制器中并进行一些插值......我觉得我可能有一些方法可以得到该模板直接来自 Rails 后端，因此我将其全部定义在一个地方的部分或其他地方，但我不确定如何连接这些点。

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

4

0 回答 0