Issue #528💬 RespondidoAbierto el 15 de noviembre de 2017por krunal039Reacciones 0

Código de ejemplo y problema de modelos y componentes

Respuesta rápidapor lock[bot]

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.

Lee la respuesta completa abajo ↓

Pregunta

@artf Perdón por crear otro problema, pero también he probado con el código de abajo, también he creado Codepen para ello.

'Codepen'

y aún así solo devuelve div vacío a través de editor.getHtml(),

! captura

Veo que el HTML se actualiza en Canvas pero no en el modelo.

! captura

Además, updateSrc() y la función updateh2Content() tienen var linkModel = this.get("components").at(0); indefinido.

! captura

If ¿puedes no cerrar el problema y tratar de explicar o señalar un ejemplo correcto al que pueda consultar?

'//añadir componente personalizado

comps.addType("custom-comp1", {

Defina el modelo model: defaultModel.extend({ Extender propiedades predeterminadas defaults: Object.assign({}, defaultModel.prototype.defaults, { Droppable: falso, tipo: "custom-comp1", etiquetaNombre: "div", vacío: 0, src: "http://placehold.it/260x195", h2Contenido: "Muestra H2", atributos: { "data-gjs-type": "custom-comp1" }, rasgos: [{ Tipo: "texto", etiqueta: "Fuente de la imagen", Nombre: "SRC", Provisional: "Por ejemplo, https://www.google.com", cambioprop: 1

Fragmento de códigoTEXT
}, {
                Tipo: "texto",
                etiqueta: "H2 Content",
                nombre: "h2Content",
                marcador de posición: "Sample H2",
                cambioprop: 1
            }]
        }),
        inicialize(o) {
            defaultModel.prototype.initialize.apply(esto, argumentos);

this.listenTo(this, "change:src", this.updateSrc);
            this.listenTo(this, "change:h2Content", this.updateh2Content);
        },
        updateSrc() {
            var linkModel = this.get("components").at(0);
            var src = this.get("src");
            if (linkModel) {
                linkModel.href = src;
            }
        },
        updateh2Content() {
            var linkModel = this.get("components").at(0);
            if (linkModel) {
                var h2Model = linkModel.get("components").at(0);
                var h2Content = this.get("h2Content");
                if (h2Content) h2Model.content = h2Content;
            }
        },
        updateAll() {
            this.updateSrc();
            this.updateh2Content();
        }
    }, {
        isComponent(el) {
            if (el.className === "custom-comp1") {
                return {
                    Tipo: "Custom-Comp1"
                };
            }
        }
    }),

Definir la vista
    view: defaultView.extend({
        inicialize(o) {
            defaultView.prototype.initialize.apply(esto, argumentos);
            this.listenTo(this.model, "change:src", this.updateSrc);
            this.listenTo(this.model, "change:h2Content", this.h2Content);
        },

h2Content() {
            $(this.el)
                .find("h2")
                .html(this.model.get("h2Content"));
        },
        updateSrc() {
            $(this.el)
                .find("a")
                .attr("href", this.model.get("src"));
        },

render(... args) {
            this.updateAttributes();
            this.updateClasses();
            var tempPlantilla =
                "<h2>" +
                this.model.get("h2Content") +
                "</h2><p>" +
                this.model.get("h2Content") +
                "</p>";
            Plantilla var =
                "<a onclick='event.preventDefault()' href=" + this.model.get("src") + ">" +
                tempPlantilla +
                "</a>";
            this.el.className = "custom-comp1";
            this.el.innerHTML = plantilla;
            this.model.updateAll();
            devuelvo esto;
        }
    })
});`

Respuestas (1)

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.