Issue #1777💬 RespondidoAbierto el 6 de febrero de 2019por bm2ilabsReacciones 0

¿Cómo cambiar dinámicamente los DomComponents?

Respuesta rápidapor artf

No necesitas ampliar el modelo de esta manera '''js var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ ... toHTML: función () { ... } })

Lee la respuesta completa abajo ↓

Pregunta

Hola, gracias por esta gran biblioteca, estoy trabajando con un sistema de boletines que obtiene contenido de la base de datos y genera los últimos artículos del sitio. He creado un bloque dinámico con tipo dinámico que tiene la opción source. Cuando el usuario añade el código, envía una petición a la URL y debería obtener el contenido de la que cambia el bloque por el contenido de la solicitud.

DomComponents

'''javascript

comps.addType('dynamic', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { etiquetaNombre: 'div', clase: 'contenido dinámico', Badgable: Cierto, Resaltable: Cierto, Editable: Cierto, Droppable: falso, Arrastrable: Cierto, removible: cierto, rasgos: [{ Tipo: 'URL', etiqueta: 'Fuente', Nombre: 'Source', }], }),

updated(property, value, prevValue) { if(value.source != null) { axios.get(value.source).then(function(response) { var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ Anular cómo se renderiza el componente a HTML toHTML: function () { devolver contenido; } }) console.log(originalMap.view.extend({

})) }).catch(función(error) { console.log(error) }) }

}, Barra de herramientas: [ { Atributos: {Clase: 'FA Fa-flechas'}, comando: 'importar-contenido', } ], },

{ isComponent(el) { if (el.tagName == 'DIV' && el.dataset.dynamic == "1") { return {type: 'dynamic'}; } }, }),

Definir la vista view: defaultView.extend({

eventos: { 'keydown': función(e) { if (e.key == 'Retroceso') { e.objetivo.padreNode.removeChild(e.target); } } } }), });


**Bloquear**

'''javascript

blockManager.add('dynmaic', {
                id: 'Dynmaic',
                etiqueta: 'Contenido Dynmaic',
                categoría: 'Extra',
                Textible: 1,
                Atributos: {clase: 'FAB-3x FA-REACT'},
                Vacío: Cierto,
                Resaltable: Cierto,
                Arrastrable: Cierto,
                Droppable: Cierto,
                removible: cierto,
                Editable: Cierto,
                Contenido: {
                    tipo: 'dinámico',
                    atributos: {
                        'dinámico de datos': 1,
                        Valor: 'dinámico'
                    }
                },
            });

Respuestas (2)

artf8 de febrero de 2019

No necesitas ampliar el modelo de esta manera '''js var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ ... toHTML: función () { ... } })

puedes simplemente actualizar el método a HTML si la instancia actual, por ejemplo.
'''js
editor.getSelected().toHTML = () => nuevoContenido;
lock[bot]9 de febrero de 2020

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.