Issue #493💬 RespondidoAbierto el 8 de noviembre de 2017por bungambohlahReacciones 0

¿Puedo configurar contenido dinámicamente desde la API de bloques?

Respuesta rápidapor artf

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)

artf8 de noviembre de 2017

Puedes actualizar el contenido del bloque de esta manera '''js const dblock = blockManager.get('dynamic-nav'); dblock.set('content', '<ul>...');

bungambohlah9 de noviembre de 2017

Ah, ya veo, muchas gracias @artf

bungambohlah10 de noviembre de 2017

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.

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.