Question

我正在尝试创建一个纯粹的js mvc应用程序，我用输入字段的文本更新h1。我得到的结论是，模型中输入的值可以很好地记录，但由于某种原因，h1根本没有变化。

你能给我一些帮助，为什么会这样，以及如何解决它？我的代码：

window.onload = function() {
  var model = new Model();
  var controller = new Controller(model);
  var view = new View(controller);
};

 function Model() {
   this.inputtext = "zzzzz";
   this.heading = this.inputtext;
   console.log('model called');
 };
 
 function Controller(model) {
  var controller = this;
  this.model = model;

  this.handleEvent = function(e) {
    switch (e.type) {
      case "click":
        controller.clickHandler(e.target);
        break;
      case "input":
        controller.keyupHandler(e.target);
        break;
      default:
        console.log(e.target);
    }
  }

  this.getModelHeading = function() {
    console.log("from getmodel: " + controller.model.inputtext + "heading " + controller.model.heading);

    return controller.model.heading;
  }

  this.keyupHandler = function(target) {
    controller.model.inputtext = target.value;
    controller.getModelHeading();
  }

  console.log('controller called');
};

function View(controller) {
  this.controller = controller;
  this.heading = document.getElementById("heading");
  this.heading.innerHTML = controller.getModelHeading();
  this.inputtext = document.getElementById("inputtext");
  this.inputtext.addEventListener('input', controller);
  console.log('view called');
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" : content="width=device-width">
  <title>Vanilla MVC Framework</title>
  <script type="text/javascript" src="./Config.js"></script>
  <script type="text/javascript" src="./Model.js"></script>
  <script type="text/javascript" src="./Controller.js"></script>
  <script type="text/javascript" src="./View.js"></script>
</head>

<body>
  <input id='inputtext' /></input>
  <h1 id='heading'></h1>
</body>

</html>

Answer 1

您需要将视图链接到控制器，然后从控制器修改视图。

＆＃13;

window.onload = function() {
  var model = new Model();
  var controller = new Controller(model);
  var view = new View(controller);
};

 function Model() {
   this.inputtext = "zzzzz";
   this.heading = this.inputtext;
   console.log('model called');
 };
 
 function Controller(model) {
  var controller = this;
  this.model = model;

  this.handleEvent = function(e) {
    switch (e.type) {
      case "click":
        controller.clickHandler(e.target);
        break;
      case "input":
        controller.keyupHandler(e.target);
        break;
      default:
        console.log(e.target);
    }
  }

  this.getModelHeading = function() {
    // console.log("from getmodel: " + controller.model.inputtext + "heading " + controller.model.heading);
    controller.model.heading = controller.model.inputtext;
    return controller.model.heading;
  }

  this.keyupHandler = function(target) {
    controller.model.inputtext = target.value;
    controller.view.heading.innerHTML=controller.getModelHeading();
  }

  console.log('controller called');
};

function View(controller) {
  this.controller = controller;
  this.heading = document.getElementById("heading");
  this.heading.innerHTML = controller.getModelHeading();
  this.inputtext = document.getElementById("inputtext");
  this.inputtext.addEventListener('input', controller);
  controller.view = this;
  console.log('view called');
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" : content="width=device-width">
  <title>Vanilla MVC Framework</title>
  <script type="text/javascript" src="./Config.js"></script>
  <script type="text/javascript" src="./Model.js"></script>
  <script type="text/javascript" src="./Controller.js"></script>
  <script type="text/javascript" src="./View.js"></script>
</head>

<body>
  <input id='inputtext' />
  <h1 id='heading'></h1>
</body>

</html>

＆＃13;

Answer 2

仅在View类的构造函数中更新h1元素。在keyUp事件处理程序中，您更新唯一的模型，但尚未重新分配view.heading.innerHtml值。

只有您的View应该知道DOM中显示model.property的位置。因此，我建议您在视图中添加此代码：

function View(controller) {
  var _self = this;

  this.controller = controller;
  this.heading = document.getElementById("heading");
  updateHeading.call(_self);

  this.inputtext = document.getElementById("inputtext");
  this.inputtext.addEventListener('input', function(e){
      controler.handleEvent(e);
      updateHeading.call(_self);
  });
  console.log('view called');

  function updateHeading(){
       this.heading.innerHTML = controller.getModelHeading();
  }
}

纯javascript mvc更新h1基于输入

2 个答案: