💬 Answered: Función de componentes del modelo de Rei…

Pregunta

Hola a todos,

Tengo un componente personalizado con una estructura diferente según el valor de la prop. ¿Cómo puedo recordar/reiniciar el funcionamiento de los componentes del modelo en un evento de cambio de prop?

'''javascript const EDC = editor. DomComponents;

const TableType = EDC.getType('table'), TableModel = TableType.model, TableView = TableType.view;

EDC.addType('product', { isComponent: (el) => 'producto' en el.dataset, model : TableModel.extend({ Predeterminados: { ... TableModel.prototype.defaults, Atributos : { ancho : '100%', frontera : 0, Espacio celular: 0, relleno de celda : 0, 'producto-datos': '', }, disposición: 'v', Rasgos : [ { Tipo: 'select', Nombre: 'Arreglo', etiqueta: 'Arreglo', cambioProp: 1, Opciones : [ { valor: 'h', etiqueta: 'Horizontal', }, { valor: 'Hola', etiqueta: 'Inverso horizontal', }, { valor: 'v', etiqueta: 'Vertical', }, ], }, ], componentes : modelo => { const arrangement = model.get('arrangement') || 'v';

que el cuerpo;

if (arreglo === 'v') { pBody = [ _wrapComp('fila', pImg, Utilería común), _wrapComp('row', pInfo, commonProps), ]; } si no, { pImg.style['width'] = '200px';

Comps de const = disposición === 'h' ? [pImg, pInfo] : [pInfo, pImg];

pBody = [ _wrapComp('row', comps, commonProps), ]; }

return { tipo: 'tbody', componentes: pBody, ... Utilería común, }; }, }, }), view : TableView.extend({ onRender() { const pItem = this.model.get('product') || {}; const pInfo = { img : pItem.image || requiere('~/assets/img/product-ph/select-t.png'), Nombre: pItem.name || 'Nombre del producto', precio: pItem.price || '00.00', url : pItem.url || url.front, };

this.model.onAll((m) => { const v = m.getView(); const vm = v.model;

Switch (vm.get('uid')) { Caso 'URL': v.setAttribute('href', pInfo.url); pausa;

Caso 'IMG': v.setAttribute('src', pInfo.img); pausa;

Caso 'Nombre': vm.set('content', pInfo.name); pausa;

Caso 'Precio': vm.set('content', pInfo.price); pausa; } }); }, }), });


Gracias de antemano.

Respuestas (2)

artf• 19 de marzo de 2020

Creo que 'this.components(this)' mostrará el error 'Tamaño máximo de pila de llamadas exceed' mientras intentas añadir el componente a sí mismo. Probablemente tengas que probar esto '''js this.components( this.proto.defaults.components(this) )

Probablemente sugeriría, en este caso, aislar la función para que todo quede más limpio
'''js
const createComponents = (modelo) => ...

EDC.addType('product', {
....
	Predeterminados: {
		...
		componentes: createComponents,
	}
	...
		this.listenTo(this, 'change:propName', () => 
			this.components(createComponents(this))
		)

pouyamiralayi• 16 de marzo de 2020

Hola @V1cu puedes registrar a tus oyentes dentro del hook init como se indica a continuación:

modelo: {
            init() {
                this.listenTo(this, 'change:propName', () => this.components(this))
            },
}

¡Salud!

Función de componentes del modelo de Reinit

Pregunta

Respuestas (2)

Preguntas y respuestas relacionadas

[PREGUNTA] Actualizar vista de componentes al cambiar la propiedad

¿Cómo puedo actualizar el nodeValue (valor de texto) de los componentes mediante formas de entrada

[PREGUNTA] ¿Cómo obtener el rasgo del modelo de un componente?

[PREGUNTA]: ¿Cómo puedo crear bloque con imagen de fondo con un comportamiento similar a una "imagen" incorporada?

Plugins de pago que cumplen con este problema

Explorar categorías de plugins