我在使用 bind 将 this 语句更改为指向我的控制器 Javascript MVC 时遇到问题

Question

我正在尝试在一个简单的 print hello world 程序中实现模型视图控制器模式。除了最后单击程序中的按钮后，我可以使一切正常工作。我正在尝试将我的函数绑定到控制器，以便函数使用控制器中的 this 语句来访问我的模型并查看控制器中的实例。当我单击按钮时，函数中的 this 语句引用我的按钮对象而不是控制器。我在使用 bind 更改 this 语句指向的内容时遇到问题。请提供任何帮助，我们将不胜感激。谢谢。

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

Answer 1

问题是您在使用未绑定版本作为回调后更改控制器实例属性。

创建控制器时直接绑定即可修复。或者你最好使用箭头函数。

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>

我在使用 bind 将 this 语句更改为指向我的控制器 Javascript MVC 时遇到问题

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

html

javascript

css

model-view-controller

this