Issue #527💬 RespondidoAbierto el 15 de noviembre de 2017por krunal039Reacciones 1

Problema con el modelo y el retorno HTML

Respuesta rápidapor adamlc1

@krunal039 esto no es un formulario de apoyo. Si tienes algún problema, preguntar aquí solo va a enfurecer a los colaboradores. Si tienes un problema, pregunta en Stack Overflow, para eso es...

Lee la respuesta completa abajo ↓

Pregunta

#522

@artf lo intenté como dijiste, pero sin suerte, no quiero hacerte perder el tiempo, pero sería muy útil si por favor puedes crear una pequeña muestra o indicarme una muestra, seguro que me estoy perdiendo algo. Perdón, tenía que abrir otro número, pero es una continuación del mismo #522,

Fragmento de códigoTEXT
aquí solo editor.html() devuelve el valor por defecto cuando no se devuelve ningún cambio en el rasgo de componente.

Puedo ver valores actualizados en Canvas pero cuando obtengo html a través de editor.html() da valores por defecto pero no se actualiza por trait.

'function createPCBoxComp(comps, defaultModel, defaultView) {

comps.addType('pcBox', {
      Defina el modelo
      model: defaultModel.extend({
        Extender propiedades predeterminadas
       defaults: Object.assign({}, defaultModel.prototype.defaults, {
          Droppable: falso,
          tipo: 'pcBox',
          etiquetaNombre: 'div', 
          vacío: 0,
          src: '/sites/testUniTest/Images1/Environment/level3/balloons_over_turkey.png',
          hoverText: 'Enlace a la página del currículo',
          título: 'Enlace curricular',
          a_href: 'https://team.global.test/sites/testUni',
          Objetivo: '_blank',
          atributos: {
            marco borde: 0,
            'data-gjs-type': 'pcBox',
          },
          rasgos: [{
              Tipo: 'texto',
              etiqueta: 'Texto de Crucero',
              nombre: 'hoverText',
              Provisional: 'por ejemplo. Enlace a la página del currículo',
              cambioProp: 1,
            },
            {
              Tipo: 'texto',
              etiqueta: 'Título(al final de la imagen)',
              Nombre: 'Título',
              Provisional: 'por ejemplo. Enlace curricular',
              cambioProp: 1,
            }, {
              Tipo: 'texto',
              etiqueta: 'Enlace para abrir',
              Nombre: 'a_href',
              Provisional: 'por ejemplo. https://team.global.test/sites/testUni',
              cambioProp: 1,
            }, {
              tipo: 'select',
              etiqueta: 'Target',
              Nombre: 'Objetivo',
             Opciones: [{
                  valor: '_parent',
                  nombre: 'This Window'
                },
                {
                  valor: '_blank',
                  nombre: 'New Window'
                },
              ],
              cambioProp: 1,
            },
            {
              Tipo: 'texto',
              etiqueta: 'Fuente de la imagen',
              Nombre: 'SRC',
              Provisional: 'por ejemplo. https://team.global.test/sites/LearningDevLib/test%20portal%20deliverables%20%20approved/2.%20Business%20and%20Role%20Specific/7.test%20technology/Assets_pics_graphics/t3.1_test_engineering/test_tools_training.jpg',
              cambioProp: 1,
            },
          ],
        }),
        init(){
        },
        inicialize(o) {
          defaultModel.prototype.initialize.apply(esto, argumentos);
          this.listenTo(this, 'change:target', this.updateTarget);
          this.listenTo(this, 'change:title', this.updateTitle);
          this.listenTo(this, 'change:hoverText', this.updateHoverText);
          this.listenTo(this, 'change:a_href', this.updateLink);
          this.listenTo(this, 'active', this.openModal);
          this.listenTo(this, 'dblclick active', this.openModal);
          this.listenTo(this, 'change:src', this.updateSrc);

this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

if (this.config.am)
            this.am = this.config.am;
            this.class = this.class && this.class.indexOf("pcBox") > -1?  this.class : this.class+ " pcBox";

},
        updateAll(){
          this.updateTitle();
          this.updateHoverText();
          this.updateLink();
          this.updateTarget();
          this.updateSrc();
        },
        updateTitle() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var h2Model = linkModel.get("components").at(1);
            título var = this.get('título');
            if (título)
              h2Model.content = título;
          }
        },
        updateHoverText() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var hoverTextModel = imageModel.get("components").at(1);
            var hoverText = this.get('hoverText');
            if (hoverText)
              hoverTextModel.content = hoverText;
          }
        },
        updateLink() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var a_href = this.get('a_href');
            si (a_href)
              linkModel.href = a_href;
          }
        },
        updateTarget() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var objetivo = this.get('target');
            si (objetivo)
              linkModel.target = objetivo;
          }
        },
        updateSrc() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var imageTagModel = imageModel.get("components").at(0);
            var src = this.get('src');
            si (src)
              imageTagModel.src = src;
          }
        }
      }, {
        isComponent(el) {
          si ((el.getAttribute & &
              el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'gjs-cust-pcBox pcBox') {
            return {
              tipo: 'pcBox'
            };
          }
        }
      }),

Definir la vista
      view: defaultView.extend({

etiquetaNombre: 'div',
        eventos: {
          'dblclick': 'openModal',
          'click': 'openSettings',
        },

openSettings(e) {

var openBlocksBtn = editor. Panels.getButton ('vistas', 'bloques abiertos');
          openBlocksBtn & & openBlocksBtn.set('active', 0);

var openTMBtn = editor. Panels.getButton ('vistas', 'open-tm');
          openTMBtn & & openTMBtn.set('active', 1);
        },

inicialize(o) {
          defaultView.prototype.initialize.apply(esto, argumentos);
          this.listenTo(this.model, 'change:target', this.updateTarget);
          this.listenTo(this.model, 'change:title', this.updateTitle);
          this.listenTo(this.model, 'change:hoverText', this.updateHoverText);
          this.listenTo(this.model, 'change:a_href', this.updateLink);
          this.listenTo(this.model, 'active', this.openModal);
          this.listenTo(this.model, 'dblclick active', this.openModal);
          this.listenTo(this.model, 'change:src', this.updateSrc);

this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

if (this.config.am)
            this.am = this.config.am;
        },

updateTitle() {
          $(this.el).find('h4').html(this.model.get("título"));
        },
        updateHoverText() {
          $(this.el).find('p.img__description').html(this.model.get("hoverText"));
        },
        updateLink() {
          $(this.el).find('a').attr('href', this.model.get("a_href"));
        },
        updateTarget() {
          $(this.el).find('a').attr('target', this.model.get("target"));
        },
        updateSrc() {
          var src = this.model.get("src");
          $(this.el).find("img.img__img").attr('src', src);
          if (!src)
            $(this.el).find("img.img__img").addClass(this.classVacty);
          si no,
            $(this.el).find("img.img__img").removeClass(this.classVacty);
        },

openModal(e) {
          var em = this.opts.config.em;
          var editor = em ? em.get('Editor'): '';

si (editor) {
            editor.runCommand('open-assets', {
              Objetivo: esto.modelo,
              onSelect() {
                editor. Modal.close();

editor. AssetManager.setTarget(null);
              }
            });
          }
          this.$el.click();
        },
        disableClick() {
          this.preventDefault();
       },
        render(... args) {
          this.updateClasses();          
          this.updateAttributes();

var tempTemplate = "<div class=img__wrap><img class=img__img src=" + this.model.get("src") + "><p class=img__description>" + this.model.get("hoverText") + "</div><h4>" + this.model.get("título") + "</h4>";
          var plantilla = "<a href=" + this.model.get("a_href") + " target=" + this.model.get("target") + " onclick='event.preventDefault()'>" + tempTemplate + "</a>"
          this.el.className = "gjs-cust-pcBox pcBox";
          this.el.setAttribute("data-gjs-type", "pcBox");
          this.el.innerHTML = (plantilla);
          this.model.updateAll();
          devuelvo esto;
        }
      })
    });
  };`

Respuestas (2)

adamlc15 de noviembre de 2017

@krunal039 esto no es un formulario de apoyo. Si tienes algún problema, preguntar aquí solo va a enfurecer a los colaboradores. Si tienes un problema, pregunta en Stack Overflow, para eso es...

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.