Issue #2801💬 RespondidoAbierto el 25 de mayo de 2020por feddReacciones 1

Enriquecer cualquier componente con las expresiones if del lado del servidor o foreach (concretamente, MVEL)

Respuesta rápidapor Ju99ernaut1

Para rodear un elemento, mira 'toHtml', puedes buscarlo en los archivos para ver ejemplos. En cualquier caso, no creo que sea buena idea reemplazar el tipo de componente por defecto, sugeriría crear un nuevo componente que extienda el tipo por defecto y usar 'isComponent' para determinar cómo se asigna. La documentaci...

Lee la respuesta completa abajo ↓

Pregunta

Estoy investigando cómo crear una plantilla con expresiones del lado del servidor que repita un componente ('foreach') o lo elimine completamente ('if'). Mi backend analiza plantillas con mvel.

Lo que estoy pensando es añadir un par de ajustes a todos o algunos elementos seleccionados. Por ejemplo, a una '<div>' de una celda, así que se ve así:

<div mvel-foreach="item : people" class="cell" id="iuck"> .... Algunos contenidos se lanzaron inside...@{ítem.apelido}... ... etcétera, etc </div>

O a un Texto ('mvel-ending' inserta un separador entre elementos):

<div mvel-ending="', '" mvel-foreach="item : people" id="iohm">@{item.apelapelido}</div>

Después de eso, planeo hackear un postprocesador que rodee los elementos repetitivos con expresiones reales de mvel:

@foreach{ítem : personas}<div id="iohm">@{item.apelapelido}</div>@end{', '}

Mi postprocesador sucio será responsable de la sustitución inversa de expresiones por atributos de etiqueta antes de cargar la plantilla en el editor GrapesJs con el método 'setComponents'.

Así que la pregunta N1 es lo que me falta, ¿hay una mejor manera de rodear algunos elementos selectos (o todos) con expresiones del lado del servidor que en realidad no son etiquetas?

La pregunta N2 es: ¿cómo puedo añadir realmente esos ajustes a todos o algunos elementos? Estaba leyendo la documentación y decidí que si actualizo el tipo de componente raíz llamado "default", añadiré mis 3 campos a todos los editores de elementos, así que he hecho esto:

var editor = grapesjs.init({ Altura: '100%', contenedor: editorDiv, showOffsets: cierto,

Fragmento de códigoTEXT
fromElement: false,
            avisoOnUnload: falso,
            storageManager: false,
            Plugins: ['GJS-preset-webpage'],
            lienzo: {
                Estilos: [
                    'w3.css'
                ]
            }
        });

const mvelModel = {
            modelo: {
                Predeterminados: {
                    Rasgos: [
                        'mvel-si',
                        'mvel-foreach',
                        'final mvel',
                    ]
                }
            }
        };

editor. DomComponents.addType('default', mvelModel);

Esto resultó ser incorrecto: solo se actualizaron las celdas en columnas del conjunto básico de bloques, y mis campos _reemplazaron_ los campos de configuración estándar en lugar de estar _merged_, así que obviamente me estoy perdiendo cómo los tipos de componentes se extienden entre sí y cómo fusiono mis rasgos con los componentes.

Respuestas (3)

Ju99ernaut26 de mayo de 2020

Para rodear un elemento, mira 'toHtml', puedes buscarlo en los archivos para ver ejemplos.

En cualquier caso, no creo que sea buena idea reemplazar el tipo de componente por defecto, sugeriría crear un nuevo componente que extienda el tipo por defecto y usar 'isComponent' para determinar cómo se asigna. La documentación de components podría ser útil

fedd26 de mayo de 2020

La documentación de los componentes podría ser útil

He escrito mi código basándome en este artículo. Dice,

Actualizar los tipos de componentes es bastante sencillo, veamos cómo: .... La propiedad de 'defaults' se maneja de forma diferente y se fusionará con los antiguos 'predeterminados'

Fragmento de códigoTEXT
Así que estoy actualizando, no el tipo de componente por defecto, sino un tipo simple de componente "entrada" con esto:

const mvelModel = {
            modelo: {
                Predeterminados: {
                    Rasgos: [
                        'mvel-si',
                        'mvel-foreach',
                        'final mvel',
                    ]
                }
            }
        };
        editor. DomComponents.addType('input', mvelModel);

Aun así, en lugar de *fusionar* los nuevos rasgos, *reemplaza* los rasgos previamente definidos de la entrada por los nuevos.

¿Alguna idea de cómo _añadir_ elementos de configuración a un tipo de componente existente? ¿O al menos cómo recuperar los rasgos existentes? Actualizar los tipos de componentes satisfará mis necesidades sin extenderlos todos y duplicar el número de esos tipos
artf26 de mayo de 2020

@fedd puedes añadir tus nuevos rasgos en la función 'model.init'

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 →

Explorar categorías de plugins

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