¿Cómo usar la gema capullo en Rails 7?

La gema Cocoon es una poderosa herramienta que simplifica la gestión de formularios anidados en aplicaciones Rails. Con Capullo, puede manejar fácilmente las adiciones y eliminaciones dinámicas de campos de formulario anidados, proporcionando una experiencia de usuario perfecta. En este artículo, exploraremos cómo utilizar el Gema Cocoon en una aplicación Rails 7 a través de un ejemplo práctico.

Instalación y configuración de Cocoon Gem

Para comenzar, instalemos y configuremos la gema Cocoon en una aplicación Rails 7.

Agrega la gema Cocoon a tu Gemfile:

gema 'capullo'

Ejecute el comando del paquete para instalar la gema:

instalación del paquete

Requerir Cocoon en su archivo de manifiesto JavaScript (aplicación/javascript/packs/application.js):

//= requiere capullo

Asegúrese de tener jQuery instalado. Si no, agrégalo a tu Gemfile:

gema 'jquery-rails'

Configure jQuery en su aplicación agregando la siguiente línea a su archivo de manifiesto de JavaScript:

//= requiere jquery3

Implementación de formularios anidados con Cocoon

Supongamos que tenemos una aplicación Rails simple que modela una publicación de blog y sus comentarios asociados. Usaremos Cocoon para gestionar la creación y eliminación de comentarios dentro del formulario de publicación del blog.

Configurar las asociaciones:

Aplicación #/modelos/post.rb
publicación de clase <registro de aplicación
tiene_muchos: comentarios
Accepts_nested_attributes_for: comentarios, enable_destroy: verdadero
fin

#app/modelos/comment.rb
comentario de clase < registro de aplicación
pertenece_a: publicación
fin

Cree el formulario anidado en la vista del formulario de publicación:

Aplicación #/vistas/publicaciones/_form.html.erb
<%= form_with(modelo: publicación) hacer |f| %>
<%= f.label :título %>
<%= f.text_field :título %>
<%= f.fields_for :comentarios hacer |comment_fields| %
<%= renderizar 'campos_comentarios', f: campos_comentarios %>
<% final %>

<%= link_to_add_association 'Agregar comentario', f, :comentarios %>
<%= para enviar %>
<% final %>

Cree un parcial para los campos de comentarios:

Aplicación #/views/posts/_comment_fields.html.erb
<div class="”nested-fields”">
<%= f.label :contenido %><%= f.campo_texto: contenido %>
<%= link_to_remove_association 'Eliminar comentario', f %>
</div>

Agregue el JavaScript necesario para habilitar la funcionalidad Cocoon:

// aplicación/javascript/packs/application.js
$(documento).on('turbolinks:cargar', función() {
$('.campos-anidados').cocoon();
});

Trabajar con formularios anidados usando Cocoon

Ahora que hemos implementado las configuraciones necesarias, veamos Cocoon en acción.

1. Cuando cargue el formulario de publicación del blog, verá el enlace "Agregar comentario".
2. Al hacer clic en "Agregar comentario", se agregará dinámicamente un nuevo conjunto de campos de comentarios al formulario.
3. Para eliminar un comentario, haga clic en el enlace "Eliminar comentario" asociado con ese comentario.
4. Cuando se envíe el formulario, la publicación y sus comentarios asociados se guardarán en la base de datos.

Conclusión: 

La gema Cocoon simplifica el manejo de formularios anidados en aplicaciones Rails 7. Si sigue los pasos descritos en este artículo, podrá administrar sin problemas las adiciones y eliminaciones dinámicas de campos de formulario anidados, mejorando la experiencia del usuario. Incorpore Cocoon en sus proyectos Rails para manejar de manera eficiente formularios complejos y mejorar la gestión de datos. Experimente con sus diversas opciones y funciones de personalización para satisfacer sus necesidades específicas. ¿Está buscando un socio confiable que se encargue de sus necesidades de desarrollo de Rails? No busque más. RielesCarma ofrece completo Servicios de desarrollo de rieles. que abarcan todo, desde el diseño inicial hasta la implementación y el mantenimiento.