Issue #631💬 RespondidoAbierto el 12 de diciembre de 2017por z1lkReacciones 1

Cómo actualizar la vista de Clases para el componente activo en el Style Manager

Respuesta rápidapor z1lk1

Ah. La ClassTagsView (sección de clases del gestor de estilos) actualiza la lista de selectores en el evento 'change:selectedComponent"' en el modelo del editor. https://github.com/artf/grapesjs/blob/66c19dae4ff5536a34b9ea73d3614fc76752a77c/src/selector_manager/view/ClassTagsView.js#L54 Solucioné mi problema añadiendo...

Lee la respuesta completa abajo ↓

Pregunta

Estoy usando un rasgo (tipo=select) para cambiar la clase de un componente (un componente "columna", es decir, clases que representan el ancho 1-12). Después de eliminar las clases 'col-*' anteriores y añadir la recién seleccionada (mediante una función que se activa con el cambio de selección), la sección de Clases del Gestor de Estilos sigue teniendo la clase antigua. Si selecciono un componente diferente y luego vuelvo a seleccionar la columna, tiene la nueva clase correcta. ¿Cómo puedo forzar una actualización en el gestor de estilos sin desactivar o volver a seleccionar el componente?

Quizá estoy añadiendo o eliminando clases de forma incorrecta, si la vista del Gestor de Estilos debería actualizarse automáticamente. ¿Esto es material estándar de Backbone? Si es así, me encantaría que me indicaran una imprimación concisa para Backbone.

Creación de componentes relevantes:

VAR Comps = Editor. DomComponents;
var defaultType = comps.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;

comps.addType('col', {
  model: defaultModel.extend({
    defaults: Object.assign({}, defaultModel.prototype.defaults, {
      'nombre personalizado': 'Columna',
      rasgos: [{
        tipo: 'select',
        opciones: /* mapa de clases */,
        etiqueta: 'Ancho',
        Nombre: 'Col-width',
        cambioprop: 1
      }]
    }),
    init() {
      this.listenTo(this, 'change:col-width', this.changeColClass);
    },
    changeColClass() {
      ancho var = this.get('col-width');
      var classes = this.get('classes');

Eliminar la clase Col existente
      var col_classes = /* Lista de clases */
      classes.forEach(element => {
        si (col_classes.includes(element.id)) {
          clases.remove(elemento);
        }
      });

Añadir nueva clase al Selector Manager y a la lista de clases de componentes
      var class_name = 'col-' + ancho;
      var sm = this.sm.get('SelectorManager');
      var class_obj = sm.add(class_name)
      clases.add(class_obj);
    }
  }, {
    isComponent: function(el) { /* comprueba si contiene una clase col */ }
  }),
  view: defaultView
});

Respuestas (2)

lock[bot]18 de septiembre de 2019

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.