Tengo una pagina web de un formulario en el que tengo unos componentes colocados con Bootstrap.
Tengo un componente que es una barra que a medida que voy rellenando las preguntas de un formulario la barra debe ir creciendo. Para eso tengo una clase hecha que se llama barra y otra que se llama formulario. La clase barra debe recoger el numero de preguntas que se van contestando de formulario.
El formulario manda un evento a la pagina principal con:
window.parent.postMessage
Y lo recojo con:
window.addEventListener ('message', function(e) { // código });
¿ Es correcta esta manera de pasar datos de una clase a otra ? ¿ Hay alguna mas sencilla ? He leído que se puede hacer con el patrón observador, pero no se como se implementa en javascript
Voy a agregar mas codigo para aclararlo:
En lo que es la pagina principal 'pagina.html' donde tengo el formulario tengo algo asi:
window.addEventListener('message', function (e) {
switch (e.data.tipo) {
case "FormularioControl":
barra.goStep(e.data.subTab);
break;
}
});
Donde barra y formulario es un objeto de una clase en javascript que lo instancio como
var barra = new BarraControl();
var formulario = new FormularioControl();
Dentro de la clase FormularioControl tengo una llamada a un metodo cada vez que se pulsa boton de siguiente y que manda un mensaje a pagina principal.html de esta manera:
window.parent.postMessage({"tipo":"FormularioControl", "subTab": this.currentSubTab }, "*");
Donde la llave 'tipo' refleja de que clase viene el mensaje, en este caso de "FormularioControl" y la variable "subTab" tiene el valor del paso por el que va. Segun este valor la barra crecera o decrecera.