Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Microsoft Edge 130.0.2849.46Enlace de demo reproducible https://jsfiddle.net/uwybfd98/Describe el bicho ¿Cómo reproducir el bicho?seleccionar el componente del carruselhaz clic en el espacio en la esquina superior derecha o inferior izquierda de la imagen y selecciona div; Clonar dos veces ¿Cuál es el comportamiento esperado? Un clon solo se activa una vez ¿Cuál es el comportamiento actual? Vuelve a...

Gracias por informar de esto, @hr1201. Buena pregunta sobre un error cuando uso component:clone en un component. El enfoque recomendado con Componentes es utilizar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico Busca el método del oyente de eventos 'on()' La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', ()...

Issue #6260💬 RespondidoAbierto el 24 de octubre de 2024por hr1201Reacciones 0

question bug components typescript

Un error cuando uso component:clone en un component

Respuesta rápidapor artf

@hr1201 onRender puede activarse muchas veces, nunca deberías poner oyentes ahí si no limpias bien. Tu lógica también está puramente relacionada con modelos, así que ni siquiera debería estar en la vista, solo mueve tu código en el método 'model.init'

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Microsoft Edge 130.0.2849.46

Enlace de demo reproducible

https://jsfiddle.net/uwybfd98/

Describe el bicho

¿Cómo reproducir el bicho?

seleccionar el componente del carrusel
haz clic en el espacio en la esquina superior derecha o inferior izquierda de la imagen y selecciona div;
Clonar dos veces

¿Cuál es el comportamiento esperado? Un clon solo se activa una vez

¿Cuál es el comportamiento actual? Vuelve a aparecer y provoca un atasco

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: '''js onRender({ el, model }) { model.getChildAt(0).forEachChild(child => { child.on('component:clone', función (originalModel, cloneModel) { console.log('clon') si (model.getChildAt(0).get('components').length == 6) return; model.trigger("change:script"); }) child.on('component:remove:before', function (model1, removeFn, options) { console.log('eliminar') if (model.getChildAt(0).get('components').length == 2) { options.abort = true; regresar; } model.trigger("change:script"); }) }) },


! [dc23c5c8e486b07c53a673e38406a1e](https://github.com/user-attachments/assets/44686398-451a-4d70-82c7-d4dd947c53e4)

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto

Respuestas (2)

artf• 1 de noviembre de 2024

@hr1201 onRender puede activarse muchas veces, nunca deberías poner oyentes ahí si no limpias bien.

Tu lógica también está puramente relacionada con modelos, así que ni siquiera debería estar en la vista, solo mueve tu código en el método 'model.init'

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @hr1201.

Buena pregunta sobre un error cuando uso component:clone en un component. El enfoque recomendado con Componentes es utilizar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!