Problema de Model Html

#513 Perdón por abrir un nuevo número, pero has cerrado el anterior, así que tuve que crear uno nuevo, Estoy teniendo dificultades con lo que sigue a continuación, así que si podéis ayudarme a resolver o orientarme con código de ejemplo, sería genial, o si tenéis un rato rápido de 5 minutos y creáis un pequeño código, estaría muy bien por vuestra ayuda. He intentado que lo sugieras, pero aún así el modelo no se actualiza en los componentes hijos, solo devuelve valores predeterminados cuando se renderizan los componentes.

'''js función createPCBoxComp(comps, defaultModel, defaultView) {

comps.addType('pcBox', { Defina el modelo model: defaultModel.extend({ Extender propiedades predeterminadas defaults: Object.assign({}, defaultModel.prototype.defaults, { Droppable: falso, 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',

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, }, ], }), 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; }, 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; } }, getAttrToHTML(... args) { var attr = defaultModel.prototype.getAttrToHTML.apply(this, args);

var linkModel = this.get("components").at(0); if (linkModel) { var imageModel = linkModel.get("components").at(0); var h2Model = linkModel.get("components").at(1); var imageTagModel = imageModel.get("components").at(0); var hoverTextModel = imageModel.get("components").at(1);

var src = this.get('src'); si (src) imageTagModel.src = src;

título var = this.get('título'); if (título) h2Model.content = título;

var a_href = this.get('a_href'); si (a_href) linkModel.href = a_href;

var objetivo = this.get('target'); si (objetivo) linkModel.target = objetivo;

var hoverText = this.get('hoverText'); if (hoverText) hoverTextModel.content = hoverText; }

regresar la atracción; }

}, { isComponent(el) { si ((el.getAttribute & & el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'cust-section') { 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.updateAttributes(); this.updateClasses(); 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 = "pcBox"; this.el.innerHTML = (plantilla); devuelvo esto; } }) }); };

Ahora se genera por debajo de HTML pero no actualiza correctamente la propiedad.

! [1](https://user-images.githubusercontent.com/11716808/32786384-b48e5cc6-c94b-11e7-8a46-baa7027bf1a3.png)