Issue #1674💬 RespondidoAbierto el 20 de diciembre de 2018por alialrabiReacciones 0
Renderizar bloque tras la acción del rasgo.
Respuesta rápidapor artf
Dentro del lienzo tienes Componentes... No bloques. Un bloque es simplemente un contenedor que crea componentes cuando los arrastras dentro del lienzo. Lee con atención https://grapesjs.com/docs/modules/Components-js.html y mira cómo puedes interpolar las propiedades de los componentes para crear scripts dinámicos
Lee la respuesta completa abajo ↓Pregunta
Fragmento de códigoTEXT
He creado un nuevo bloque llamado barra lateral que tiene actualizaciones dinámicas por componente de rasgo, contienen casillas para cambiar contenido dinámico pasando un parámetro a un bloque, bloque actualizado pero no renderizado en el editor. ¿Cómo puedo renderizar un bloque en el editor después de hacer clic en la casilla?
Quiero actualizar ${data.cat} en el editor
Contenido de bloquear en la clase SidebarTool
la clase export SidebarTool implementa BasicTool {
createTool(data){
return {
id: 'Al margen',
etiqueta: '<i class="fab fa-stripe-s fa-3x"></i> <br><br><div>Barra lateral</div>',
Contenido: {
etiquetaNombre: 'sidebarSelect',
Componentes: [
{
type:'sidebarSelect',
etiquetaNombre: 'div',
script:' var SERVER_PATH="http://ec2-52-8-60-188.us-west-1.compute.amazonaws.com:8080/";\n' +
' $(documento).ready(function() {\n' +
' $.ajax({\n' +
' tipo: "POST",\n' +
' URL: "https://ayxpoload9.execute-api.us-east-1.amazonaws.com/v1",\n' +
' contentType: "application/json",\n' +
' éxito: function(res) {\n' +
' localStorage.setItem("token", res.body);\n' +
' getData([${data.cat}]);\n' +
' console.log([${data.cat}];\n' +
' console.log($("ul li").longitud);\n' +
' }\n' +
' });\n' +
' ////////////////////////////////////////////////////\n' +
' función getChildByParent(id){\n' +
' //\n' +
'\n' +
' this.access_token = localStorage.getItem("token");\n' +
' const url = SERVER_PATH+\'learning/api/learningunitmbrByParent/\'+id+\'?access_token=\' + access_token;\n' +
' \n' +
' if(!$("ul-"+id+" li").length){\n' +
' $.ajax({\n' +
' tipo: "GET",\n' +
' contentType: "application/json",\n' +
' URL: URL,\n' +
' éxito: función(msg,textStatus, request) { \n' +
' newDom="";\n' +
' msg.map(res =>{\n' +
' newDom+= "<li>"+res.child.name+""</li>\n' +
' \n' +
' });\n' +
' if(newDom == ""){\n' +
' $(".card-body-"+id).html("No contenido en este curso");\n' +
' }else{\n' +
' $(".card-body-"+id+" ul").html(newDom);\n' +
' }\n' +
' },\n' +
' });\n' +
' }\n' +
' }\n' +
' \n' +
'\n' +
'\n' +
' función getData(filter_data) {\n' +
' \n' +
' columna=[\'nombre\',\'estado\',\'valoración\']\n' +
' this.access_token = localStorage.getItem("token");\n' +
' const url = SERVER_PATH+\'learning/api/learningunits/filter/DEV?access_token=\' + access_token;\n' +
' \n' +
' si(filter_data == indefinido)\n' +
' filter_data=[];\n' +
' $.ajax({\n' +
' tipo: "POST",\n' +
' contentType: "application/json",\n' +
' URL: URL,\n' +
' data: JSON.stringify(filter_data),\n' +
' procesoData: false,\n' +
' éxito: función(msg,textStatus, request) { \n' +
' msg.map(data =>{\n' +
' newDom= \n' +
' \' <div class="card">\'+\n' +
' \' <div data-target="#collapseOne-\'+data.id+\'" aria-expanded="false" aria-controls="collapseOne-\'+data.id+\'" data-toggle="collapse" data-id="\'+data.id+\'" class="card-header" id="headingOne">\'+\n' +
' \' <h5 class="mb-0">\'+data.name+\'</h5>\'+\n' +
' \' <i class="fa fa-caret-down"></i>\'+\n' +
' \</div>' \'+\n' +
' \' <div id="collapseOne-\'+data.id+\'" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">\'+\n' +
' \' <div class="card-body card-body-\'+data.id+\'">\'+\n' +
' \'<ul class="ul-unstyled ul-\'+data.id+\'"></ul>\'\n' +
' \</div>' \'+\n' +
' \</div>' \'+\n' +
' \' </div>\';\n' +
' \n' +
' $(".contenedor-lista").append(newDom);\n' +
' });\n' +
' \n' +
'\n' +
' $(".encabezado-tarta").click(función() {\n' +
' si ($(esto).hijos("yo").hasClass("fa-caret-down")) {\n' +
' $(esto).niños("yo")\n' +
' .removeClass("fa-caret-down")\n' +
' .addClass("fa-caret-up");\n' +
'\n' +
' console.log( $(this).attr("data-id"));\n' +
' getChildByParent($(this).attr("data-id"));\n' +
' } si no {\n' +
' $(esto).niños("yo")\n' +
' .removeClass("fa-caret-up")\n' +
' .addClass("fa-caret-down");\n' +
' }\n' +
' });\n' +
' \n' +
' },\n' +
' });\n' +
' }\n' +
'\n' +
' });',
contenido: ' <!DOCTYPE html>\n' +
'<html>\n' +
'\n' +
'\n' +
'<head>\n' +
'\n' +
' <meta http-equiv="Access-Control-Allow-Origin" content="*">\n' +
' <Meta Name="csrf-token" content="b7c2a345-1b2b-41FD-9871-305523fe2828">\n' +
' <nombre del encabezado="Access-Control-Allow-Origin" valor="*" />\n' +
'\n' +
' \n' +
' <link rel="hoja de estilo" tipo="texto/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n' +
' <link rel="feuilletas de estilo" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anónimo">\n' +
'\n' +
'\n' +
' <style>\n' +
' .card-header {\n' +
' pantalla: -webkit-box;\n' +
' color de fondo: rgba(0, 0, 0, 0);\n' +
' frontera-fondo: 0;\n' +
' }\n' +
'\n' +
' .card-header .fa {\n' +
' relleno: 1px 8px;\n' +
' -webkit-transition: todos los 0.5s facilidad;\n' +
' -moz-transition: todos los 0.5s se relajan;\n' +
' -o-transición: todos los 0,5s se relajan;\n' +
' transición: todos los 0,5s facilidad;\n' +
' }\n' +
' .card-header i:hover {\n' +
' cursor: pointer;\n' +
' }\n' +
'\n' +
' .card-header i{\n' +
' margen-top:10px;\n' +
' }\n' +
'\n' +
' .card-body{\n' +
' transición: todos los 0.7s relajan los 0s;\n' +
' acolchado-top:0px;\n' +
' acolchado-bottom:0px;\n' +
' }\n' +
'\n' +
' .card{\n' +
' antecedentes: #ebebeb;\n' +
' }\n' +
'\n' +
'\n' +
' .card-header h5{\n' +
' bottom: 0px;\n' +
' Tamaño de caja: caja de borde;\n' +
' color: RGB(51, 51, 51);\n' +
' cursor: pointer;\n' +
' Altura: 27.6px;\n' +
' izquierda: 0px;\n' +
' posición: relativa;\n' +
' derecha: 0px;\n' +
' Decoración-texto: No Solid RGB(51, 51, 51);\n' +
' ajustar-tamaño-texto: 100%;\n' +
' top: 0px;\n' +
' columna-rule-color: rgb(51, 51, 51);\n' +
' origen-perspectiva: 160.5px 13.8px;\n' +
' Transform-Origin: 160.5px 13.8px;\n' +
' color-caret: rgb(51, 51, 51);\n' +
' borde: 0px ningún rgb(51, 51, 51);\n' +
' fuente: normal normal 600 normal 16px / 17.6px "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' margen: 0px 0px 10px;\n' +
' esquema: rgb(51, 51, 51) ninguna 0px;\n' +
' relleno: 10px 20px 0px 0px;\n' +
' }\n' +
'\n' +
' .carta i{\n' +
' color: RGB(119, 119, 119);\n' +
' transición: todos los 0.7s relajan los 0s;\n' +
' }\n' +
'\n' +
' ul li{\n' +
' relleno-izquierda: 15px;\n' +
' color: RGB(119, 119, 119);\n' +
' }\n' +
' ul li:hover{\n' +
' Tamaño de caja: caja de borde;\n' +
' color: RGB(119, 119, 119);\n' +
' pantalla: bloquear;\n' +
' /* altura: 27,6px; */\n' +
' text-align: left;\n' +
' Decoración-texto: no sólido RGB(119, 119, 119);\n' +
' ajustar-tamaño-texto: 100%;\n' +
' \n' +
' columna-rule-color: rgb(119, 119, 119);\n' +
' origen-perspectiva: 160.5px 13.8px;\n' +
' Transform-Origin: 160.5px 13.8px;\n' +
' Color-Caret: RGB(119, 119, 119);\n' +
' antecedentes: rgb(221, 221, 221) ningún desplazamiento repetido 0% 0% / cuadro de borde automático de relleno;\n' +
' borde: 0px ningún rgb(119, 119, 119);\n' +
' /* fuente: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; */\n' +
' Estilo de Lista: Ninguno fuera de Ninguno;\n' +
' /* margen: 1px 0px 0px; */\n' +
' Esquema: RGB(119, 119, 119) ninguna 0px;\n' +
' /* relleno: 5px 6px; */\n' +
' relleno-izquierda: 15px;\n' +
' transición: todos los 0.7s relajan los 0s;\n' +
' }\n' +
'\n' +
' ul li:hover:después {\n' +
' Tamaño de caja: caja de borde;\n' +
' color: RGB(119, 119, 119);\n' +
' text-align: left;\n' +
' Decoración-texto: no sólido RGB(119, 119, 119);\n' +
' ajustar-tamaño-texto: 100%;\n' +
' columna-rule-color: rgb(119, 119, 119);\n' +
' Color-Caret: RGB(119, 119, 119);\n' +
' borde: 0px ningún rgb(119, 119, 119);\n' +
' fuente: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' Estilo de Lista: Ninguno fuera de Ninguno;\n' +
' Esquema: RGB(119, 119, 119) ninguna 0px;\n' +
'}/*#A_1:después*/\n' +
'\n' +
' ul li:hover:antes {\n' +
' Tamaño de caja: caja de borde;\n' +
' color: RGB(119, 119, 119);\n' +
' text-align: left;\n' +
' Decoración-texto: no sólido RGB(119, 119, 119);\n' +
' ajustar-tamaño-texto: 100%;\n' +
' columna-rule-color: rgb(119, 119, 119);\n' +
' Color-Caret: RGB(119, 119, 119);\n' +
' borde: 0px ningún rgb(119, 119, 119);\n' +
' fuente: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' Estilo de Lista: Ninguno fuera de Ninguno;\n' +
' Esquema: RGB(119, 119, 119) ninguna 0px;\n' +
'}/*#A_1:antes*/\n' +
'\n' +
' </style>\n' +
' </head>\n' +
'\n' +
' <body>\n' +
' <script\n' + ' src="https://code.jquery.com/jquery-3.3.1.js"\n' + ' integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="\n' + ' crossorigin="anonymous"\n' + ' ></script>\n' +
'\n' +
' <script\n' + ' src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"\n' + ' integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"\n' + ' crossorigin="anonymous"\n' + ' ></script>\n' + +
' <script\n' + ' src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"\n' + ' integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"\n' + ' crossorigin="anonymous"\n' + ' ></script>\n' +
'\n' +
'\n' +
'\n' +
'\n' +
' <div class="accordion list-container" id="accordionExample">\n' +
' </div>\n' +
'\n' +
' </body>\n' +
'</html>\n',
}
]
}
}
}
Código de rasgos
domComps.addType('sidebarSelect', {
model: dModel.extend(
{
init() {
para (var i = 0; i < that.listcatogry.length; i++) {
if (that.listcatogry[i].type == 'casilla de verificación') {
this.listenTo(this, 'change:' + that.listcatogry[i].name, this.doStuff);
}
}
console.log(este);
},
doStuff() {
que.categoríaSeleccionada = [];
var colmBlock;
this.get('traits').each(function(trait) {
if (trait.attributes.type == 'casilla de verificación' && trait.attributes.value == true) {
that.selectedCategory.push(trait.get('name'));
console.log(que.categoríaSeleccionada);
that.editor.BlockManager.get('sidebar).set( that.sideBarTool.createTool({ cat: that.selectedCategory }))
}
});
},
defaults: Object.assign({}, dModel.prototype.defaults, {
Rasgos: esto. Lista de Clasificación,
}),
},
{
isComponent: function(el) {
if (el.tagName == 'div2') {
return { type: 'input' };
}
},
},
),
vista: dVista,
});Respuestas (3)
artf• 21 de diciembre de 2018
Dentro del lienzo tienes Componentes... No bloques. Un bloque es simplemente un contenedor que crea componentes cuando los arrastras dentro del lienzo. Lee con atención https://grapesjs.com/docs/modules/Components-js.html y mira cómo puedes interpolar las propiedades de los componentes para crear scripts dinámicos
alialrabi• 21 de diciembre de 2018
Gracias por rejugar y por tu gran herramienta. ¿Es posible renderizar el componente por rasgo?
artf• 21 de diciembre de 2018
Sí, puedes escuchar cambios de rasgos y hacer lo que quieras
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1679
Cómo renderizar un componente en el lienzo usando un rasgo.
Hola Artf, gracias por tu gran herramienta, he creado un caso de prueba para mi problema https://js.do/code/271771 He creado una barra late...
3 respuestasActualizado el 2 de enero de 2020
Issue #1683
¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?
Hola @artf, Espero que estés bien. Tengo dos preguntas sobre la suma de bloques dinámicos, 1) ¿Es posible renderizar el bloque con id dinám...
3 respuestasActualizado el 27 de diciembre de 2019
Issue #1370
Necesito cambiar el selector de ID dinámico de Grapes Js.
No es un problema, necesito ayuda. He integrado Grapes J con Drupal 8, para estilizar elementos de Drupal. No quiero que el selector de id...
3 respuestasActualizado el 17 de septiembre de 2019
Issue #1777
[Pregunta] ¿Cómo cambiar dinámicamente los DomComponents?
Hola, gracias por esta gran biblioteca, estoy trabajando con un sistema de boletines que obtiene contenido de la base de datos y genera los...
2 respuestasActualizado el 9 de febrero de 2020
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...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.