¿Puedo configurar contenido dinámicamente desde la API de bloques?
Puedes actualizar el contenido del bloque de esta manera '''js const dblock = blockManager.get('dynamic-nav'); dblock.set('content', '<ul>...'); ```
Lee la respuesta completa abajo ↓Pregunta
Hola @artf, muy buen framework para creadores de páginas web y mantenlo así :+1:
Código : '''javascript ... blockManager.add('dynamic-nav', { etiqueta: 'Navegación Dinámica', atributos: { Clase: 'fa fa-ellipsis-h', título: 'Insertar menú dinámico de navegación' }, categoría: 'Sección', contenido: '<ul class="hide-on-med-and-down" data-gjs-type="navigation" data-section-type="navigation"> <li> <a href="page1.html">Página 1</a> </li> <li> <a href="page2.html">Página 2</a> </li> <li> <a href="page3.html">Página 3</a> </li> ... ',</ul> }); ...
Como puedes ver, ¿puedo hacer <li>una etiqueta dinámica de '' desde mi backend?
Yo uso la plantilla de EJS para mi motor de renderizado de vistas y puedo pasar datos a EJS.
Muchas gracias y que tengas un buen día
Respuestas (3)
Puedes actualizar el contenido del bloque de esta manera '''js const dblock = blockManager.get('dynamic-nav'); dblock.set('content', '<ul>...');
Ah, ya veo, muchas gracias @artf
Hola, @artf tengo un problema, el bloque de mi dynamic-nav funciona ahora, pero cuando doy algún script a ese componente me da un error de '''Identificador inesperado'''. ¿Puedo corregir? Si no es así, por favor corrígeme, muchas gracias
Ese es mi guion: '''javascript ... Navegación dinámica blockManager.add('dynamic-nav', { etiqueta: 'Navegación Dinámica', atributos: { Clase: 'fa fa-ellipsis-h', título: 'Insertar menú dinámico de navegación' }, categoría: 'Sección', Contenido: { script: función () { var contentDynamic = ""; var xhr = new XMLHttpRequest();
contentDynamic += '<div id="dynamic-nav-wrapper" class="nav-wrapper" data-section-type="dynamic-menu-nav"> <a href="index.html" class="logo-marca"><img src="imágenes/logo.png"></a> <a href="index.html" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> <ul id="dynamic-page" class="right hide-on-med-and-down">';
xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { var pages = ""; páginas = JSON.parse(xhr.responseText); para (var i = 0; i < páginas.longitud; ++i) { console.log(páginas[i]); if (pages[i].uuid == "<%= page.uuid %>") { contentDynamic += '<li class="current"><a href="${pages[i].url}">${pages[i].menu_name}</a></li>'; } else { contentDynamic += '<li><a href="${pages[i].url}">${pages[i].menu_name}</a></li>'; } } } } xhr.open('GET', '/dev/editor/dynamicnav', cierto); xhr.send(nulo); contentDynamic += '</ul></div>';
this.innerHTML(contentDynamic);
console.log('el elemento', esto); }, } }); ...
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1471
[Pregunta] Gestor de bloques e imagen
¡Hola! Uso este código para añadir un nuevo bloque: blockManager.add("image", { etiqueta: 'Image', categoría: 'Básico', atributos: { clase:...
Issue #1545
[Pregunta] ¿Cómo consigo identificación de Block?
Hola, tengo mi bloque y recibo resultados de impresión en Div ID de mi componente de clase javascript... ¿Cómo consigo identificación de mi...
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #555
Añadir un script externo en script mientras creas un nuevo componente
Hola @artf ¿Cómo puedo pasar un enlace de script externo mientras creo un componente? así, bm.add('test-block2', { etiqueta: 'Test block2',...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.