{"id":37354,"date":"2023-07-12T06:16:59","date_gmt":"2023-07-12T06:16:59","guid":{"rendered":"https:\/\/www.railscarma.com\/?p=37354"},"modified":"2023-07-20T04:44:16","modified_gmt":"2023-07-20T04:44:16","slug":"como-usar-la-gema-capullo-en-rails-7","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/es\/blog\/como-usar-la-gema-capullo-en-rails-7\/","title":{"rendered":"\u00bfC\u00f3mo usar la gema capullo en Rails 7?"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La gema Cocoon es una poderosa herramienta que simplifica la gesti\u00f3n de formularios anidados en aplicaciones Rails. Con Capullo<\/a>, puede manejar f\u00e1cilmente las adiciones y eliminaciones din\u00e1micas de campos de formulario anidados, proporcionando una experiencia de usuario perfecta. En este art\u00edculo, exploraremos c\u00f3mo utilizar el Gema Cocoon en una aplicaci\u00f3n Rails 7<\/strong> a trav\u00e9s de un ejemplo pr\u00e1ctico.<\/span><\/p>

Instalaci\u00f3n y configuraci\u00f3n de Cocoon Gem<\/b><\/h3>

Para comenzar, instalemos y configuremos la gema Cocoon en una aplicaci\u00f3n Rails 7.<\/span><\/p>

Agrega la gema Cocoon a tu Gemfile:<\/span><\/p>

gema 'capullo'<\/strong><\/p>

Ejecute el comando del paquete para instalar la gema:<\/span><\/p>

instalaci\u00f3n del paquete<\/strong><\/p>

Requerir Cocoon en su archivo de manifiesto JavaScript (<\/span>aplicaci\u00f3n\/javascript\/packs\/application.js<\/span>):<\/span><\/p>

\/\/= requiere capullo<\/strong><\/p>

Aseg\u00farese de tener jQuery instalado. Si no, agr\u00e9galo a tu Gemfile:<\/span><\/p>

gema 'jquery-rails'<\/strong><\/p>

Configure jQuery en su aplicaci\u00f3n agregando la siguiente l\u00ednea a su archivo de manifiesto de JavaScript:<\/span><\/p>

\/\/= requiere jquery3<\/strong><\/p>

\u00a0<\/p>

Implementaci\u00f3n de formularios anidados con Cocoon<\/b><\/h3>

Supongamos que tenemos una aplicaci\u00f3n Rails simple que modela una publicaci\u00f3n de blog y sus comentarios asociados. Usaremos Cocoon para gestionar la creaci\u00f3n y eliminaci\u00f3n de comentarios dentro del formulario de publicaci\u00f3n del blog.<\/span><\/p>

Configurar las asociaciones:<\/span><\/p>

Aplicaci\u00f3n #\/modelos\/post.rb<\/strong>
publicaci\u00f3n de clase <registro de aplicaci\u00f3n
tiene_muchos: comentarios
Accepts_nested_attributes_for: comentarios, enable_destroy: verdadero
fin<\/strong><\/p>

#app\/modelos\/comment.rb
<\/strong>comentario de clase < registro de aplicaci\u00f3n
<\/strong>pertenece_a: publicaci\u00f3n
<\/strong>fin<\/strong><\/p>

Cree el formulario anidado en la vista del formulario de publicaci\u00f3n:<\/span><\/p>

Aplicaci\u00f3n #\/vistas\/publicaciones\/_form.html.erb
<\/strong><%= form_with(modelo: publicaci\u00f3n) hacer |f| %>
<\/strong><%= f.label :t\u00edtulo %>
<\/strong><%= f.text_field :t\u00edtulo %>
<\/strong><%= f.fields_for :comentarios hacer |comment_fields| %
<\/strong><%= renderizar 'campos_comentarios', f: campos_comentarios %>
<\/strong><% final %><\/strong><\/p>

<%= link_to_add_association 'Agregar comentario', f, :comentarios %>
<\/strong><%= para enviar %>
<\/strong><% final %><\/strong><\/p>

Cree un parcial para los campos de comentarios:<\/span><\/p>

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

Agregue el JavaScript necesario para habilitar la funcionalidad Cocoon:<\/span><\/p>

\/\/ aplicaci\u00f3n\/javascript\/packs\/application.js
<\/strong>$(documento).on('turbolinks:cargar', funci\u00f3n() {
<\/strong>$('.campos-anidados').cocoon();
<\/strong>});

<\/strong><\/p>

Trabajar con formularios anidados usando Cocoon<\/b><\/h3>

Ahora que hemos implementado las configuraciones necesarias, veamos Cocoon en acci\u00f3n.<\/span><\/p>

  1. Cuando cargue el formulario de publicaci\u00f3n del blog, ver\u00e1 el enlace "Agregar comentario".<\/span><\/li>
  2. Al hacer clic en "Agregar comentario", se agregar\u00e1 din\u00e1micamente un nuevo conjunto de campos de comentarios al formulario.<\/span><\/li>
  3. Para eliminar un comentario, haga clic en el enlace "Eliminar comentario" asociado con ese comentario.<\/span><\/li>
  4. Cuando se env\u00ede el formulario, la publicaci\u00f3n y sus comentarios asociados se guardar\u00e1n en la base de datos.<\/span><\/li><\/ol>

    Conclusi\u00f3n:\u00a0<\/b><\/h3>

    La gema Cocoon simplifica el manejo de formularios anidados en aplicaciones Rails 7. Si sigue los pasos descritos en este art\u00edculo, podr\u00e1 administrar sin problemas las adiciones y eliminaciones din\u00e1micas 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\u00f3n de datos. Experimente con sus diversas opciones y funciones de personalizaci\u00f3n para satisfacer sus necesidades espec\u00edficas. \u00bfEst\u00e1 buscando un socio confiable que se encargue de sus necesidades de desarrollo de Rails? No busque m\u00e1s. RielesCarma<\/a> ofrece completo Servicios de desarrollo de rieles.<\/a> que abarcan todo, desde el dise\u00f1o inicial hasta la implementaci\u00f3n y el mantenimiento.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t

    \r\n
    Art\u00edculos Relacionados<\/div>\r\n
    \r\n\r\n
    \r\n
    \r\n \r\n\r\n \"Most\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Top 20 Programming Languages in 2026: Trends, Uses, Pros, Cons & How to Choose <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"C\u00f3mo\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n C\u00f3mo pueden las startups desarrollar productos de IA m\u00e1s r\u00e1pidamente con Ruby on Rails <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Ruby\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Ruby on Rails para soluciones de automatizaci\u00f3n empresarial: la transformaci\u00f3n de las operaciones empresariales modernas <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Empresas\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Las 20 mejores empresas de desarrollo web de la India en 2026 <\/a>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n