شکل تو در تو ریل (نگین جدید با محرک)

فرم‌های تودرتو، فرم‌هایی هستند که مدل‌ها و ویژگی‌های تودرتو را به یک شکل مدیریت می‌کنند. به عنوان مثال یک پروژه با وظایف خود یا یک فاکتور با موارد خط آن.

قبل از Rails 6، Cocoon انتخاب خوبی برای ایجاد فرم های تو در تو پویا است. اما Cocoon برای کارکرد خوب به jQuery نیاز دارد، این یک کتابخانه بسیار قدیمی در فریمورک‌های frontend امروزی است.
هنگامی که Stimulus منتشر شد، به توسعه دهندگان Rails پیشنهاد می شود که از Stimulus به عنوان کتابخانه جاوا اسکریپت در پروژه های خود استفاده کنند. بنابراین، من یک جواهر برای مدیریت فرم‌های تودرتو پویا با Stimulus JS ایجاد کردم.

$ gem 'rondo_form', '~> 0.2.1'

$ rails g rondo_form:install

rails g scaffold Project name:string description:string
rails g model Task description:string done:boolean project:belongs_to

<%= simple_form_for(@project) do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :description %>
  </div>

  <h3 class="text-xl mt-4">Tasks</h3>
  <div class="my-2" data-controller="nested-rondo">
    <%= f.simple_fields_for :tasks do |task| %>
      <%= render "task_fields", f: task %>
    <%

Rondo Form آسان برای استفاده است، آن را به همان نام helper برچسب به عنوان cocoon دارد: link_to_add_association، link_to_remove_association.
این جواهر برای کار کردن نیازی به وابستگی‌های JS ندارد، وقتی تحت فرمان اجرا می‌کنید، تولید می‌شود nested_rondo_controller.js در شما app/javascript/controllers/ پوشه:

rails g rondo_form:install 

و این کنترلر را به صورت خودکار به index.js وارد کنید.

import NestedRondoController from "./nested_rondo_controller"
application.register("nested-rondo", NestedRondoController)

باید اضافه کنید data-controller="nested-rondo" به یک عنصر، که می پیچد fields_for و link_to_add_association یاور.
مثلاً مدل Project را داریم که دارد has_many ارتباط با مدل وظیفه
در شما projects/_form جزئي:

<%= simple_form_for(@project) do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :description %>
  </div>
  <h3>Tasks</h3>
  <div data-controller="nested-rondo">
    <%= f.simple_fields_for :tasks do |task| %>
      <%= render "task_fields", f: task %>
    <% end %>
    <div class="links">
      <%= link_to_add_association "Add Task", f, :tasks %>
    </div>
  </div>
  <%= f.button :submit %>
<% end %>

در شما _task_fields جزئي:

<div class="nested-fields">
  <%= f.input :description %>
  <%= f.input :done, as: :boolean %>
  <%= link_to_remove_association "Remove Task", f %>
</div>

این نمونه را با سنگ SimpleForm ساختم، اما ایده با فرم استاندارد Rails یکسان است.