Estoy tratando de implementar el patrón del controlador de vista del modelo en un programa simple de impresión hola mundo. Puedo hacer que todo funcione correctamente, excepto al final, después de hacer clic en el botón de mi programa. Estoy tratando de vincular mi función al controlador para que la función use las declaraciones this en el controlador para acceder a mi modelo y ver instancias en el controlador. Cuando hago clic en el botón, estas declaraciones en mi función hacen referencia a mi objeto de botón en lugar del controlador. Tengo problemas para usar bind para cambiar a lo que apuntan estas declaraciones. Por favor, cualquier ayuda sería muy apreciada. gracias.
<!DOCTYPE html> <html lang="en"> <head> <title> Hello World MVC </title> <link rel="stylesheet" href="css file name"> </head> <body> <div id="container"> <input type=text id="textBox"> <button id="displayButton">Display</button> </div> <script src="mainbind.js"></script> </body> </html> function Model(text) { this.data = text; }; function View() { this.displayButton = document.getElementById('displayButton'); this.textBox = document.getElementById('textBox'); this.initialize = function(displayButtonProcess) { this.displayButton.addEventListener('click', displayButtonProcess); } }; function Controller(text) { this.model = new Model(text); this.view = new View; this.buttonClick = function(event) { // process the button click event this.view.textBox.value = this.model.data; }; this.view.initialize(this.buttonClick); }; let x = new Controller("Hello World"); x.buttonClick = x.buttonClick.bind(x);El problema es que está cambiando la propiedad de la instancia del controlador después de haber usado la versión no vinculada como devolución de llamada.
Puede solucionarlo vinculando directamente al crear un controlador. O deberías usar mejor las funciones de flecha en su lugar.
this.buttonClick = () => this.view.textBox.value = this.model.value function Model(text) { this.data = text; }; function View() { this.displayButton = document.getElementById('displayButton'); this.textBox = document.getElementById('textBox'); this.initialize = function(displayButtonProcess) { this.displayButton.addEventListener('click', displayButtonProcess); } }; function Controller(text) { this.model = new Model(text); this.view = new View; this.buttonClick = function(event) { // process the button click event this.view.textBox.value = this.model.data; }; this.view.initialize(this.buttonClick.bind(this)); }; let x = new Controller("Hello World"); // x.buttonClick = x.buttonClick.bind(x); <div id="container"> <input type=text id="textBox"> <button id="displayButton">Display</button> </div>