I am having trouble using bind to change the this statement to point to my controller Javascript MVC-CodePudding

I am trying to implement model view controller pattern in a simple print hello world program. I can get everything to work properly except at the end after I click the button in my program. I am trying to bind my function to the controller so that way the function uses the this statements in the controller to access my model and view instances in the controller. When I click the button the this statements in my function are referencing my button object instead of the controller. I am having trouble using bind to change what the this statements point to. Please, any assistance would be greatly appreciated. thank you.

<!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);

CodePudding user response：

The problem is that you are changing controller instance property after you have already used unbinded version as a callback.

You can fix it by binding directly when creating a controller. Or you should better use arrow functions instead.

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>